МК Как рисовать скетчи в фотошопе. За несколько шагов создаем в фотошопе скетч эффект для текста
– нового приложения для iOS – вместо популярного проекта Adobe. Это самое впечатляющее противостояние в сфере инструментов для веб-дизайна 2016 года.
Изначально Photoshop не был направлен на веб-дизайнеров. Как-никак, он ведь называется PHOTO shop. Это уже после всего он был так назван. Но cо временем Photoshop стал наиболее используемым инструментом среди графических и веб-дизайнеров, а также создателей веб-сайтов. Это больше, чем инструмент для редактирования фотографий и картинок, – его интерфейс, насыщенный разнообразными опциями и функциями, вдохновил многих дизайнеров на создание целых веб-страниц в Photoshop.
Но, как пел Боб Дилан, времена меняются, и Photoshop придется немного подвинуться, чтобы уступить место кому-то помоложе и посильнее. Новое приложение Sketch от Bohemian Coding кажется более гибким, функционально-насыщенным и простым в использовании. Кажется… это ключевое слово. Практически постоянно ведутся дебаты насчет того, может ли Sketch полностью заменить продукты компании Adobe для веб-дизайнеров.
По правде говоря – это действительно нелегкий выбор между Photoshop и Sketch . Sketch лидирует в некоторых позициях, но в других вы определенно будете склонны использовать Photoshop. Давайте рассмотрим, почему.
Плюсы и минусы Photoshop
Photoshop – знакомый инструмент для 99% веб-дизайнеров. Вот почему он так популярен. Большинство дизайнеров довольно ленивы и не изменяют своим привычкам, так что процесс изучения нового инструмента точно не принесет им удовольствия. Когда вы привыкаете к какому-либо программному обеспечению, гораздо быстрее выполнять определенные действия в нем, чем изучать новые функции и “быстрые” клавиши.
Photoshop может использоваться как с Windows, так и с iOS , что делает его доступным для многих пользователей. Поскольку Adobe представил свои приложения Photoshop Mix и Photoshop Fix для iPad, у дизайнеров теперь есть возможность редактировать изображения или создавать макеты на ходу.
Однако ценовая политика компании Adobe последнее время снижает ваши шансы на использование Photoshop. Поскольку команда Adobe сменила ценовые предложения на ежемесячные планы подписки (полагаю, вы все знаете о Creative Cloud), многие дизайнеры отказываются от инструментов Photoshop, останавливая свой выбор на более доступном программном обеспечении, или прекращают обновлять свои Photoshop CS6 версии.
Однако, в Photoshop CC все еще есть одна особенность, благодаря которой веб-дизайнеры до сих пор используют программное обеспечение Adobe. Creative Cloud Libraries позволяет обеспечить сохранность всех ваших объектов и без лишних сложностей делиться ими между различными устройствами и продуктами Adobe, такими как Illustrator, InDesign и т.д.
Прорыв Sketch заставил Adobe присмотреться к своей продукции и задуматься об усовершенствованиях, чтобы не отставать от конкурентов. Следуя ожиданиям пользователей, Photoshop недавно добавил функцию экспорта , которую успели высоко оценить пользователи Sketch. Вы можете экспортировать все ваши файлы, элементы, создавать дополнительные расширения для изображений и объектов в несколько кликов.
Photoshop теперь имеет Артборды – инструмент, с которым уже знакомы те, кто пользовался Illustrator и Sketch. Этот креативный элемент позволяет вам иметь несколько «полотен» в пределах одного документа, что сэкономит время? которое раншье тратилось на открытие различных документов для преобразования объектов и обмена элементами. Аналогичные функции можно обнаружить в смарт- объектах, которые уже присутствуют в Photoshop некоторое время.
И появился Sketch…
Sketch существует всего несколько лет и уже завоевал широкую аудиторию преданных поклонников. Вы можете найти множество дискуссий на Quora с тысячами комментариев, где отстаивают Sketch. Профессиональные веб-дизайнеры делятся своим опытом в полном отказе от Photoshop и переходе на Sketch. о полном отказе от Photoshop и переключаться на Sketch.
И это не удивительно, так как Sketch предоставляет некоторые функции, которых нет в Photoshop. Это приложение, которое не потребляет много оперативной памяти и “весит” очень мало. В отличие от Photoshop, приложение Sketch предлагает менее громоздкое меню с большим количеством кнопок на панели инструментов. На первый взгляд их расположение может показаться немного тесным, но как только вы привыкаете к ним – они становятся достаточно удобными в пользовании. правильный выбор.
Sketch содержит встроенные сетки , которые позволяют работать с элементами дизайна быстрее и более слаженно. В сочетании со множеством пресетов шаблонов и пресетами в Артбордах, процесс создания дизайнов становится увлекательной игрой.
Конечно, многие дизайнеры отмечают, что Sketch не предоставляет широкий набор инструментов, как Photoshop. А еще у Photoshop есть бесплатные экшены , которые являются одними из самых удивительных изобретений, позволяющих сэкономить время для создания различных эффектов. Для расширения функциональности Sketch необходимо установить различные плагины. Однако эти плагины становятся настоящим “сундуком сокровищ”, если вы их установите. Они добавляют приложению удивительные возможности, которые вы не сможете найти в Photoshop. По крайней мере сейчас, ведь, как я уже упоминал выше, Sketch вдохновил Photoshop создать свою собственную версию Артбордов, так что – кто знает…
Несколько основных особенностей Sketch
Давайте посмотрим, в каких областях Sketch превосходит Photoshop, и какими функциями и плагинами вы можете пользоваться.
Фокус на векторных изображениях
Sketch отреагировал на одну из самых популярных тенденций веб-дизайна последнего времени и стал полностью ориентированным на векторный дизайн и изображения. Эти легчайшие файлы появились в ответ на важность адаптивного дизайна и растущее использование экранов высокой четкости (да, Sketch идеально походит для применения на дисплеях Retina от Apple).
Создание макетов для различных размеров экрана всегда было трудоемким процессом, который требует большого количества времени. Sketch предлагает несколько инструментов, которые позволяют вам свободно и легко менять размер элементов. Его Mirror Plugin позволяет видеть, не отходя от кассы, как объекты будут выглядеть на экране iPhone или iPad. Никаких больше размытых линий, каждый пиксель учтен.
CSS логика
Но настоящая магия кроется в том, как Sketch использует стили CSS. Приложение включает логику CSS и позволяет создавать дизайны, которые позже могут быть легко преобразованы в элементы CSS. Это практически стирает грань между веб-дизайном и разработкой. Вы создаете кнопку и с правым щелчком мыши можете выбрать и скопировать стили CSS, готовые к использованию в макете.
Кроме того вы можете преобразовать созданный элемент в символ, который может использоваться во всем дизайне. Что такое символы? Это следующая особенность Sketch, которую я хотел бы отметить.
Символы и динамические кнопки
С помощью этих двух плагинов вы можете улучшать ваш дизайнерский опыт и повысить его до более высокого уровня разработки. Таким образом, группы элементов можно преобразовать в Символ . В этой группе вы можете играть с цветом, размером, шрифтом, изображением и т.д. И затем, когда все будет готово, вы можете использовать этот символ для всех таких элементов на сайте. Это значит, что вы буквально можете создать универсальный вид макета вашего веб-сайта. При применении изменений к одному из элементов в группе символов, он будет отображаться для всех таких элементов на каждой странице или в посте блога и т.д. И вам не нужно вручную воспроизводить этот элемент на каждой странице.
Плагин динамических кнопок делает то же самое для всех кнопок в вашем проекте. Если вы вынуждены работать на страницах с несколькими кнопками, этот плагин является реальным спасением. Он автоматически создает символ для вашей кнопки, добавляя отступы вокруг него. А когда вы добавляете на кнопку текст, она автоматически подстраивается под количество его символов.
Текстовые стили и управление цветом в Sketch
Sketch позволяет вам легко управлять оформлением и цветовой гаммой в рамках проекта. Для оформления можно создавать различные текстовые стили для встроенных элементов, таких как заголовки или текстовые блоки. Затем эти тексты применяются ко всем элементам того же вида в вашем проекте. Вносить изменения в текстовые стили проще простого. Если вы решили отменить шрифт для заголовка H2 и заменить его более подходящим, измените его один раз, а Sketch сделает все остальное. Изменения будут применены автоматически для всех H2 в вашем проекте.
Настройка цвета работает аналогичным образом. Можно создать цветовую палитру для всего веб-сайта на Moodboard (большое дополнение к Артбордам, что позволяет вам сохранить ваши файлы и элементы по щелчку одним кликом мышки). Цвета, которые вы желаете видеть в ваших дизайнах, будут храниться в Moodboards, и вы с легкостью сможете использовать любой из них для вашего следующего проекта. Кроме того Sketch позволяет получить доступ ко всем вашим файлам в одном Артборде, вы можете легко копировать и вставлять любой элемент стиля, включая его характеристики, цвета и стили для любого другого объекта, выбранного вами.
Что вы можете в одном приложении, но не можете в другом?
Я полагаю, вы уже впечатлены теми возможностями, которые предоставляет Sketch. Но не спешите выбрасывать ваш ПК и покупать Macbook, чтобы начать использовать Sketch. Возможно, вам сначала нужно просто посмотреть на то, что Sketch не может сделать для ваших проектов и что Photoshop может?
- Редактирование изображений. Поскольку Photoshop был создан для редактирования фотографий, он позволяет идеально редактировать такого рода файлы. Его функционал и инструменты для редактирования изображений также превосходят возможности Sketch, что оставляет за Photoshop место короля в этой области.
- Управление цветом. В вопросах управления цветом Photoshop выигрывает и эту битву. Он позволяет использовать все доступные цвета в любых вариациях. Sketch пока менее заточен на колористику элементов.
- Простота в использовании. Photoshop имеет в своем распоряжении множество “горячих” клавиш, чтобы ускорить рабочий процесс. Тем не менее, Sketch не отстает от него благодаря своей универсальной административной панели. Вы можете адаптировать его панель инструментов к вашим потребностям и сделать работу с ним более удобной для себя.
- Возможности веб-дизайна. С учетом всего, сказанного выше, Sketch является удивительным приложением для создания пользовательского интерфейса. В нем есть все, что может понадобиться дизайнеру пользовательского интерфейса: векторные элементы,изначальная адаптивность элементов, невесомые файлы, сетки и т.д.
Итог
Какой инструмент выбрать? Это главный вопрос, который вы могли задавать себе, читая статью. Честно говоря, решать только вам. Я просто предоставил краткое сравнение и подробные данные об обоих инструментах.
Photoshop тяжелее, сложнее и дороже (если вам нужно использовать Creative Cloud). Sketch достаточно легкий, кажется намного проще в использовании и стоит сейчас всего $99. В любом случае, вам все равно придется сначала научиться им пользоваться. Это не тот инструмент, которые вы можете скачать и начать проектировать с нуля, как профессионал. И не забывайте: вы должны иметь девайс, работающий на iOS для использования Sketch. Эти ограничения немного разочаровывают.
Если вы являетесь счастливым обладателем девайса от Apple, знакомы со сферой веб дизайна и ориентируетесь на создание цифровых дизайнов (не для печати) – просто попробуйте Sketch. Это дает вам свободу во многих случаях. Он облегчает рабочий процесс в создании адаптивного дизайна, он позволяет вам разрабатывать макеты веб-сайта без лишних затрат времени и усилий, настраивать и корректировать их и даже экспортировать CSS код в несколько кликов.
Я не знаю, вытеснит ли Sketch в ближайшее время Photoshop, но для дизайна веб-сайтов и пользовательских интерфейсов (не редактирования фотографий и изображений) он является именно тем приложением, к которому стоит присмотреться.
В этом уроке я собираюсь показать вам, как создать экшн с карандашным наброском для Adobe Photoshop с необычной фишкой.
Этот эффект является частью экшена с карандашным наброском, который можно приобрести на Envato Market .
1. Добавляем фото девочек
Создайте новый документ размером 850 на 636 пикселей. Конечно, вы можете выбрать иной размер для PSD-документа, но вам придется пропорционально изменять размеры всего, что есть в этом уроке. В документ поместите изображение девочек.
2. Добавляем порванную бумагу
Шаг 1
Я прикрепил PNG-изображение бумаги, которым вы можете воспользоваться. Но если вы хотите сделать свою текстуру разорванной бумаги, то это достаточно просто. Вы можете взять кусок плотной бумаги или картона и неаккуратно разорвать его, чтобы получить кусочек такой формы, как вы хотите. Затем поместите его на плоскую поверхность, желательно контрастного цвета (например, черного, если бумага белая).
Сфотографируйте кусок бумаги при помощи фотоаппарата или телефона. Снимок должен быть сделан четко над куском бумаги, дабы мы в результате получили нужную нам перспективу.
Шаг 2
Загрузите снимок на компьютер и откройте его в Photoshop. При помощи инструмента Magic Wand (Волшебная палочка) выделите кусок бумаги и удалите фон.
Шаг 3
Скачайте изображение клочка бумаги и поместите его на новый слой.
Шаг 4
Нажмите Ctrl + T, чтобы вращать клочок бумаги. Поместите его над той областью, которую вы хотите превратить в карандашный набросок.
Шаг 5
Дважды нажмите Ctrl + J, чтобы создать две копии слоя с клочком бумаги. Назовите их « torn paper 1» и «torn paper 2» («порванная бумага 1» и «порванная бумага 2»).
Шаг 6
Добавьте стиль слоя Drop Shadow (Тень) к оригинальному слою с клочком бумаги. Цвет тени - #000000.
Drop Shadow (Тень):
- Непрозрачность: 43%;
- Угол: 120 градусов;
- Смещение: 7 пикселей;
- Размер: 5 пикселей.
3. Создайте четыре копии слоя с девочками
Шаг 1
Нажмите Ctrl + J четыре раза, чтобы создать четыре копии слоя с девочками, назовите их Girls 1 , Girls 2 , Girls 3 и Girls 4 (Девочки 1, 2, 3 и 4).
Шаг 2
Зажмите клавишу Ctrl и выделите все слои с девочками на панели слоев. Поместите их над слоем с клочком бумаги.
4. Воспользуйтесь фильтрами Размытие в движении и Тушь
Шаг 1
Отключите видимость всех слоев-копий кроме слоя Girls 1.
В качестве основного цвета выберите белый, а фонового - черный.
Шаг 2
Теперь, выбрав слой Girls 1, нажмите Filter > Sketch > Graphic Pen (Фильтр > Галерея Фильтров > Эскиз >
- Длина штриха: 7;
- Тоновой баланс: 21;
- Направление штриха : по диагонали вправо.
Шаг 3
Нажмите Filter > Blur > Motion Blur (Фильтр > Размытие > Размытие в движении). Смещение: 1 пиксель.
5. Воспользуйтесь фильтрами Тушь и Шум
Шаг 1
Включите видимость слоя Girls 2, режим наложения измените на Multiply (Умножение), непрозрачность на 30%.
Шаг 2
Нажмите Filter > Sketch > Graphic Pen (Фильтр > Галерея Фильтров > Эскиз > Тушь). Настройки фильтра, как на изображении ниже, но если вы воспользовались другим фото, то, возможно, настройки потребуется изменить.
Настройки фильтра на скриншоте:
- Длина штриха: 15;
- Тоновой баланс: 51;
- Направление штриха: по диагонали вправо.
Шаг 3
Нажмите Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум). Эффект: 43%
6. Воспользуйтесь фильтром Ксерокопия
Шаг 1
Включите видимость слоя Girls 3, режим наложения измените на Multiply (Умножение), непрозрачность 100%.
Шаг 2
Нажмите Filter > Sketch > Photocopy (Фильтр > Галерея Фильтров > Эскиз > Ксерокопия).
Настройки фильтра на скриншоте:
- Детализация: 1;
- Затемненность: 50
7. Воспользуйтесь фильтром Акварель
Шаг 1
Включите видимость слоя Girls 4, режим наложения измените на Color (Цветность), непрозрачность 100%.
Шаг 2
Нажмите Filter > Artistic > Watercolor (Фильтр > Галерея Фильтров > Имитация > Акварель). Пока можете скрыть видимость слоя Girls 4.
Настройки фильтра на скриншоте:
- Детализация: 4;
- Глубина теней: 0;
- Текстура: 1
8. Создайте кусочек наброска при помощи Обтравочной маски
Зажмите клавишу Ctrl и выделите слои Girls 1, Girls 2, Girls 3 и Girls 4. Кликните правой кнопкой мыши по выбранным слоям и выберите Create Clipping Mask (Создать обтравочную маску).
9. Создайте рваный край у бумаги
Шаг 1
Включите видимость слоя Torn Paper 1, режим наложения измените на Multiply (Умножение), непрозрачность - на 57%
Шаг 2
Включите видимость слоя Torn Paper 2. Кликните по кнопке добавления слой-маски на панели слоев, чтобы добавить маску к слою Torn Paper 2.
Шаг 3
Создайте новый слой под слоем Torn Paper 2 и залейте его белым цветом.
Шаг 4
Кликните по миниатюре слой-маски слоя Torn Paper 2. Нажмите Image > Apply Image (Изображение > Внешний канал).
Шаг 5
Нажмите Image > Adjustments > Levels (Изображение > Коррекция > Уровни) и измените настройки на такие же, как на скриншоте ниже. Входные значения: 56, 1.81, 67
При помощи кисти вы можете рисовать белым цветом внутри слоя Torn paper 2, если хотите усилить эффект рваного края.
Шаг 6
Удалите слой с белым фоном, чтобы увидеть эффект.
Шаг 7
С нажатой клавишей Ctrl щелкните по слоям Torn paper 1 и Torn paper 2. Затем, кликните правой кнопкой мыши по выбранным слоям и нажмите Create Clipping Mask (Создать обтравочную маску).
10. С легкостью перемещайте эффект наброска
Если вы хотите превратить в набросок другую часть своего рисунка, просто зажмите клавишу Ctrl, а затем щелкните по слоям Torn paper 1, Torn paper 2 и Torn paper.
При помощи инструмента Move (Перемещение) измените положение кусочка бумаги.
Поздравляю! Вот и все!
В этом уроке вы научились создавать эффект наброска на фотографии в Photoshop с вашими снимками всего за несколько шагов.
В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.
Последние лет двадцать самым популярным графическим редактором для дизайнеров оставался Adobe Photoshop . Однако, недавно первенство компании Adobe
на рынке инструментария для digital дизайнеров пошатнулось, в 2012 году компания Bohemian Coding
выпустила Sketch . Sketch
– это профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих. На данный момент актуальной версией является Sketch 3. За эти 3,5 года компания Bohemian Coding проделала огромную работу по улучшению своего продукта, зафиксило множество багов, наростило функциональность и собственно выростила серъезного конкурента Photoshop. Сразу хочу внести важную ремарку: я не рассматриваю Sketch как непосредственного конкурента Photoshop
. Однозначно, назначение этих программ изначально разное, соответственно, то, что для одного будет преимуществом, для другого может быть серъезным недостатком. Поэтому правильно было бы сделать не сравнительный обзор, как это делают многие, а осветить основные преимущества и свойства каждого из редакторов для конкретного кейса.
Назначение
Именно поэтому считаю корректным первым пунктом показать назначение каждой из программ.
Photoshop в основном работает с растровыми изображениями
, однако имеет некоторые векторные инструменты. Он незаменим для ретуши фото, обработки изображений. Но функционал предназначенный для работы с векторной графикой в нем достаточно условный. Многие поклонники Adobe возразят мне, но тогда возникает логичный вопрос: зачем в арсенале Adobe есть отдельный векторный редактор Illustrator, если Photoshop умеет все? Именно наличие двух интерфейсов усложняет работу и требует дополнительного времени при решении задач по работе с векторной графикой.
Sketch же изначально заточен на работу с вектором
, поскольку разработка интерфейсов подразумевает создание прототипов, фреймворков, иконок, UI-элементов, а зачастую эти элементы должны быть векторными.
Таким образом, чтобы выбрать каким из редакторов пользоваться, нужно понять, какие задачи придется решать с помощью данного инструментария.
Стоимость
Вторым по счету, но не по значимости, параметром для выбора того или иного редактора является стоимость и способ оплаты данного программного обеспечения. Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$ , и для разных регионов эта цифра может изменяться. Но суть остается та же. В отличии от Adobe компания Bohemian Coding пошла по обратному пути: Sketch продается за 99$ , это единоразовый платеж и все обновления пользователь получает бесплатно. Возможно в дальнейшем финансовая стратегия компании изменится, но пока они завоевывают рынок таким образом. Именно этот фактор, наверняка, сыграет роль в масштабах компании. Хотя и для фрилансеров немалозначимым является финансовое планирование своих ресурсов.
Мультиплатформенность
Еще одним значимым аргументом в выборе инструментария для дизайнеров станет платформа, на которой работает тот или иной софт. В нашей компании дизайнеры работают исключительно на Mac устройствах и большинство front-end разработчиков тоже. Поэтому тот факт, что Sketch существует исключительно для OS X , не стал для нас проблемой. А вот для дизайнеров, в распоряжении которых Windows устройства, это явно не решабельный вопрос. Конечно, можно заморочиться и поставить эмулятор OS X на винде, однако ничего путнего из этого может не получиться, максимум вы загрузите свой процессор и операционную систему обработкой ненужных процессов. В отличии от Sketch, Photoshop имеет отдельные версии для Windows и OS X . Поэтому в вопросе мультиплатформенности неизменным лидером остается Adobe Photoshop. Но, опять-таки, то, что на первый взгляд кажется недостатком, является сильным преимуществом в конкретных условиях. Поскольку Sketch существует только под Mac, в нем весь создаваемый контент отрисовывается с помощью средств маковской оси, используется стандартный графический движок от Apple. Именно этим разработчики добились максимальной продуктивности и быстроты работы.
Быстродействие и объем загрузочного файла
Являясь нативным Cocoa приложением, Sketch по минимуму использует нестандартные интерфейсные элементы, поэтому он имеет маленький объем. Загрузочный файл весит всего около 22 Мб . Он достаточно хорошо оптимизирован, в отличии от Photoshop, объем установочного файла которого составляет около 1 Гб .
Интеграция
Важным моментом для любого инструментария является его способность интеграции с другим софтом. Например, после того, как макет сайта полностью проработан и готов к передаче в отдел front-end разработки, становится вопрос непосредственно самой передачи исходников для дальнейшего развития проекта. На сегодняшний день и Sketch, и Photoshop имеют серьезные средства интеграции. Оба редактора могут экспортировать материалы в софт для коммуникации между разработчиками и дизайнерами, такие как Avocode , Zeplin и прочие. Если рассматривать этот кейс для компании, то данное решение крайне важно, оно помогает сэкономить деньги на дополнительные экземпляры графических редакторов для front-end разработчиков.
Обучение
Если вы решили освоить Photoshop или расширить свои знания о данном графическом редакторе, то в вашем распоряжении масса образовательных источников . Существуют обучающие ресурсы как платные, так и бесплатные. Качество материалов также очень сильно разнится: от примитивных статей неавторитетных авторов до идеально структурированных последовательных видеоуроков квалифицированных профессиональных тренеров. В силу того, что Sketch относительно молодой софт, то и количество обучающих ресурсов не сравнимо меньше , чем у Photoshop. И, как правило, это платные материалы. Например, на известном образовательном ресурсе Udemi менее 40 курсов по Sketch. Однако, уже существуют и обзор от практиков Sketch . Надеюсь, со временем количество обучающих метриалов в сети будет увеличиваться прапорционально с ростом популярности графического редактора Sketch.
Конкуренция – двигатель прогресса
Существует масса других параметров и характеристик Photoshop и Sketch, охватить их все достаточно сложно, но вывод однозначен: каждый из рассмотренных мною графических редакторов хорош для решения конкретной задачи. Если рассматривать разработку интерфейсов, то мы в компании для себя сделали однозначный выбор в пользу Sketch. Этому способствовал комплекс факторов, перечисленных в данной статье. Photoshop по прежнему является лидером в работе с растровой графикой, но нельзя игнорировать тот факт, что появление Sketch дало сильный толчок в развитии Photoshop. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.
Скетч (от англ.Sketch - эскиз, набросок, зарисовка) - это своеобразная схема, раскладка различных элементов. В скрапбукинге скетчи бывают как для страничек, так и для открыток.
Скетч может состоять просто из графических элементов, либо может быть дополнен узорами или декоративными элементами.
И, неплохо бы иметь базу разнообразных элементов в формате PNG (на прозрачном фоне), фоновых картинок и наборы разнообразных кистей.
Наборы для цифрового скрапа можно найти и скачать в интернете. Например вот есть неплохие бесплатные коллекции.
Интересные кисти тоже можно поискать в интернете, например .
Подробно о работе с кистями и их настройках читаем .
Еще для создания скетчей вам необходимо уметь работать со слоями. Хотя бы на самом начальном уровне. Без этого, к сожалению, никак.
Про слои я тоже писала, разбираемся с темой и .
А сейчас мы с вами попробуем сделать вот такой скетч.
1. Решаем какого размера будем делать скетч. Помним, что со слишком маленьким работать будет неудобно и увеличить его без потери качества будет нельзя. А слишком большой вроде как и не нужен. Мы остановимся на золотой середине - 1000х1000 пикселей.
Создаем новый документ заданного размера. Файл (File)/ Новый (New).
Задаем ширину и высоту. (Обращайте внимание на единицы измерения. Чтобы не создать файлик 1000х1000 см)
Разрешение 300 пикселей на дюйм.
2. Разбираемся, из каких элементов будет состоять наш скетч. У нас тут явно есть круги. Значит их и будем делать.
В палитре слои (layers) создаем новый чистый слой, нажав на кнопочку Создать новый слой
Чтобы получился круг, а не овал, во время создания, удерживаем shift.
После этого, снимаем выделение - ctrl+D
Чтобы добавить контур к новому кругу, делаем следующее.
Слой с белым кругом должен быть активен. Нажимаем на кнопку Эффекты слоя снизу в палитре слои.
В открывшемся окне, настраиваем толщину и цвет контура
Цветочки/ веточки /пуговки - перетягиваем на документ из просмотрщика или коммандера. Просто берем файл мышкой и затягиваем в документ. При перетягивании картинки станут смарт-объектами. Про особенности работы с ними можно почитать .
Перетягиваем элемент, нажимаем Enter
4. Чтобы создать элемент при помощи кисти (у нас это кружева и клякса), делаем следующее.
Если у вас в наборе нет нужной кисточки, скачиваем набор с интернета (файлик с расширением.abr)
Выбираем инструмент Кисть (Brush), на панели свойств кликаем по параметрам кисти, потом на кнопку-шестеренку и в выпавшем списке выбираем Загрузить кисти (Load brushes)
Нажимаем Ок и кисти появятся у вас в наборе в самом низу.
Дальше ВАЖНО: Опять создаем новый слой, выбираем понравившуюся кисть, настраиваем ее размер и только тогда ОДИН раз кликаем по документу. Потом можно выбирать инструмент Перемещение (Move) и работать с полученным элементом так же, как мы это делали с кругами и картинками.
Конечно, если вы при помощи кисти хотите создать текстуру, то кликать нужно несколько раз по одному и тому же слою.
Слои накладываются друг на друга в том порядке, в котором вы их создаете. Но в палитре Слои (Layers) их можно менять местами.
5. У каждого элемента на вашем скетче свой цвет. Можно работать с каждым слоем по отдельности и привести работу к нужной цветовой гамме. А можно сделать документ черно белым.
Самый простой способ, подходящий для документа с несколькими слоями - сделать корректирующий слой.
Кликните по самому верхнему слою в палитре Слои.
Затем снизу в палитре нажмите на кнопку создания корректирующего слоя и выберите Hue/Saturation (Цвет/Насыщенность)
И откроется палитра с настройками слоя. В ней значение Saturation (Насыщенность) ставим "-100"
Если планируем и дальше вносить изменения в этот документ, со сохраняем файл в формате PSD. Все слои сохранятся. Для интернета сохраняем в формате JPG. Все слои автоматически сольются в один.
Надеюсь МК был вам полезен.
Если что-то непонятно - задавайте вопросы.
Когда была выпущена 3 версия Sketch, среда получила очень широкое распространение и именно тогда мы начали сравнивать его с Photoshop, швейцарским ножом в мире инструментов дизайна. Со временем Sketch стал просто незаменимым инструментом в создании веб-дизайна и теперь вряд ли кто-то может представить себе свою карьеру без этой программы.
Photoshop никогда не был пригоден для веб-дизайна, но в течение длительного времени у нас попросту не было ничего другого. Сравнивать Sketch и Photoshop - это как сравнивать кислое и длинное. Все зависит от того, для чего вы используете программу. Но сейчас все меняется и Adobe уже начала более осознанно подходить к разработке приложений. Давайте же посмотрим на то, как Adobe отбивается от конкурента...
Экспорт Assets
Как мы уже говорили, функция экспорта assets - одна из фишек Sketch. Именно поэтому одним из первых шагов Adobe было внедрение аналогичной функции чтобы начать свою борьбу за позиционирование Photoshop, как инструмента для проектирования пользовательского интерфейса.
Вот быстрое сравнение двух функций:
Sketch
Выберите слой и нажмите кнопку "Make Exportable" в нижнем правом углу. По желанию, можно определить такие параметры, как size, suffix и format в зависимости от того, как и для какого типа устройств будут использованы изображения. Sketch помнит каждый экспорт. Это называется "Slice". Вы можете получить доступ к этим ним в интерфейсе с «command+shift+e », чтобы повторно запустить один, два или все эти кусочки снова.
Photoshop
Adobe делает это по-другому. Сперва включите функцию, перейдя в меню File - Generate - Image Assets .
Теперь создадим простой квадрат и сохраним документ. Photoshop автоматически экспортирует свои ресурсы в папку в зависимости от того, как вы назовите слой. Давайте начнем со square.png . Вы указали типа файла и Adobe создаст файл PNG. Остальную часть настроек можно оставить по умолчанию.
Можно также указать PNG8/PNG24 (example.png8, example.png24) или даже "example.jpg100%". Это значит, что будет создан файл JPG со 100% качеством, а не качеством в 90%, как установлено по умолчанию. Теперь давайте попробуем "200% example-retina.png, example.png". Всё будет автоматически обновляться при сохранении. На человеческом языке это значит "сделай мне обычный PNG, но в то же время сделай ещё и retina-версию для iPhone ".
Это потрясающий шаг от Adobe. Решение сохранить это в основном интерфейсе показывает, что в Adobe действительно слушают своих пользователей. Одной из самых больших проблем, озвученных пользователями Photoshop, является неуклюжесть пользовательского опыта при выполнении одних и тех же задач.
Artboards
Артборды являются неотъемлемой составляющей Sketch так же, как они всегда были основной Adobe Illustrator. Ещё какое-то время назад в Photoshop не было ничего подобного.
Давайте сравним их.
Sketch
Нажмите кнопку "A" и Инспектор (на правой стороне) будут перечислены все доступные размеры холстов. Нажмите, выберите и наслаждайтесь.
Photoshop
При открытии нового документа вы будете иметь возможность начать с холста стандартных размеров. Кажется, что нет возможности работать параллельно с несколькими монтажными областями. Но если вы щелкните правой кнопкой мыши на "Move Tool" в панели инструментов, то сможете выбрать "Artboard Tool". После этого выберите "Size", а затем нажмите кнопку "Add New Artboard".
В качестве альтернативы, вы можете изменить размер монтажной области, используя параметр Size. Вы также можете изменить ориентацию холста с помощью "Make Portrait" и "Make Landscape". В Adobe пользовательский опыт стал более гибким и привычным для дизайнеров.
Многие дизайнеы обожают простоту Sketch, так что Photoshop следует ещё много чего перенять и переосмыслить. Но они явно находятся на правильном пути.
Выводы
Наверняка Photoshop будет идти по собственному пути развития и не очень оглядываться на то, каким путём идут конкуренты. Однако приятно осознаваться, что Adobe пробила стену непонимания и черпает идеи для инноваций из обратной связи своих пользователей. Наверняка настанет ещё то время, когда Photoshop догонить Sketch по популярности и функционалу, когда речь будет идти о проектировании интерфейсов. Кажется, что Adobe стремится не только конкурировать со Sketch, но и делает что-то "своё", а не тупо копирует функции.
