Как создать эскиз для сайта в фотошопе


Профессиональный макет сайта в фотошоп / Фотошоп-мастер

Создание привлекательных и функциональных веб-макетов – неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.

Ресурсы урока:

  1. Набор иконок (wefunction.com)
    Альтернативный набор иконок
  2. Иконка Twitter (iconeden.com)
  3. Шрифт Bebas (dafont.com)

Архив

Шаг 1. Mockup

Прежде, чем мы начнем создавать макет сайта, нужно создать план-эскиз будущего макета, на котором будет видна его функциональность и приблизительный внешний вид.

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500  пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой ( Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete, чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T).

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование – Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор  и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент Прямоугольная область выделения (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N), выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete).

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T), а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool). Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J).

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

Добавьте к слою с линией маску и при помощи градиента сделайте плавный переход на краях.

Шаг 13.  Добавляем контент

Пришло время добавить области под контент. Область контента будет разделена на 3 колонки с равным отступом. Между каждой колонкой будет отступ в 25 пикселов.

Добавьте направляющие по обеим сторонам колонок.

Добавьте в колонки список услуг. Украсьте текст с услугами иконками.

Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.

К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Дублируйте слой с кнопкой (Ctrl + J).

В нижней части этих трех колонок нарисуйте серые прямоугольники и добавьте к ним стиль Обводка (Stroke), размером в 3 пиксела.

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

Примените к этой кнопке стили слоя:

Добавьте текст.

Шаг 14. Создаем футер

Создайте выделение в нижней части макета – это будет область под футер, и залейте выделение серым цветом.

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

Финальное изображение:

Автор урока: Niranth

Как создать макет веб-сайта с помощью Sketch

Вы хотите создать простой макет веб-сайта, но Photoshop кажется вам немного пугающим? Вам нужно что-то быстрое и легкое, что эффективно продемонстрирует вашу идею? Что ж, Bohemian Coding услышал ваши молитвы и предоставил инструмент, в котором приняли участие веб-дизайнеры и дизайнеры пользовательского интерфейса. Это называется Sketch, и только что вышла версия 3.

Sketch полностью векторный, а это значит, что все, что вы делаете, будет масштабируемым, а ваши процессы будут неразрушающими.Эта функция является абсолютным золотом в наши дни, со всеми различными устройствами и экранами разных размеров и разрешений, которые необходимо учитывать.

Я использую Sketch исключительно для всех своих дизайнерских работ уже два года, и я давно не чувствовал необходимости переключаться на что-то еще.

В этом уроке я буду создавать макет веб-сайта для цифровой студии Think Orange. Я расскажу вам о некоторых основных концепциях и инструментах Sketch, включая некоторые интересные новые функции, представленные в версии 3, и проведу вас от первого текстового блока к экспорту нашего окончательного дизайна и ресурсов.

Мы научимся создавать заголовки и кнопки, работать с сетками, использовать формы для маскировки элементов, экспортировать все ресурсы в различных разрешениях - Retina и без Retina - и многое другое. Если у вас нет копии Sketch, воспользуйтесь бесплатной пробной версией и следуйте инструкциям.

01. Создайте новый файл

Начнем с создания нового файла. В строке меню выберите Файл> Создать из шаблона> Веб-дизайн. Здесь у нас есть уже настроенные для нас артборды, такие как Интернет, Планшет и Смартфон (подумайте об артборде как об отдельном холсте), а также некоторые стили текста и элементы пользовательского интерфейса.

02. Вставьте символы

Перейдите на вторую страницу, и вы найдете все символы и стили текста, встроенные в этот шаблон. От форм до кнопок, от заголовков до кавычек - вы можете вставить символ, просто нажав «Вставить»> «Символ».

03. Внесение изменений

Каждое изменение, которое вы вносите в символ, будет перенесено во все экземпляры этого символа. Так что, если где-то в дальнейшем вы захотите изменить цвет кнопки «Отправить» на каждой странице, вам просто нужно сделать это один раз.То же самое и со стилями текста.

Стили текста работают так же, как теги HTML - вы можете создавать свои заголовки, текстовые стили текста и ссылок, и когда вы их меняете, они распространяются на каждый элемент. Удобно.

Для этого урока мы вернемся на нашу первую страницу и поработаем над монтажной областью рабочего стола. Начнем с создания простого фона для нашего заголовка. Вставьте прямоугольник, щелкнув Вставить> Форма> Прямоугольник (или нажав сочетание клавиш R).

Давайте сделаем так, чтобы он занимал всю ширину страницы и сделал что-то вроде 900 пикселей в высоту.Справа от Инспектора у вас есть доступ к заливкам, границам, теням - вы называете это.

05. Вставьте заголовок

Теперь добавьте заголовок. Давайте вставим текстовый блок (T), а затем мы можем просто ввести его. В Инспекторе у нас есть контроль над шрифтом, размером, цветом и всем остальным, что вы ожидаете.

06. Создайте текстовое поле

Для панели навигации вверху я создам текстовые блоки для различных ссылок. Затем, выбрав все ссылки, я воспользуюсь инструментами «Выравнивание» в верхней части Инспектора, чтобы выровнять их по горизонтали и равномерно распределить.Мы можем создать новый текстовый стиль и назвать его «Навигационные ссылки».

07. Вставьте изображение

Возможно, у вас есть логотип или фоновая фотография, которую вы хотите использовать. Чтобы вставить изображение, достаточно просто перетащить его. Просто перетащите изображение из Finder в окно Sketch, и вот оно. Если вы дважды щелкните по нему, вы можете обрезать, заполнить или даже векторизовать его.

08. Призыв к действию

Для кнопки с призывом к действию я вставлю символ кнопки и изменю текст на «Спросите нас о расценке» (см. Шаг 2, чтобы узнать, как это сделать. ).

09. Уникальные цвета

Я хочу, чтобы эта конкретная кнопка была другого цвета. Если мы просто изменим цвет, все кнопки в этом документе также изменятся. Итак, сначала нам нужно отделить его от символа.

Как и следовало ожидать, просто щелкните правой кнопкой мыши по символу (убедитесь, что вы выбираете папку с символами, а не элемент внутри нее) и выберите опцию «Отсоединить символ формы».

10. Получите размытие

Чтобы воспроизвести теперь известное размытие, которое вы найдете в iOS и новой OS X Yosemite, просто создайте прямоугольник для использования в качестве слоя размытия, выберите «Размытие фона» из раскрывающегося списка размытия на в инспекторе, настройте степень размытия с помощью ползунка ниже по своему вкусу и не забудьте изменить его непрозрачность, чтобы вы могли действительно видеть, что за ним.

11. Добавление метки

Теперь я хочу создать простую сетку объектов 4x3 - скажем, изображение и простую метку. Я группирую элементы и выбираю опцию «Упорядочить»> «Создать сетку». Здесь вы можете установить количество столбцов, строк и полей между ними. Нажмите Make Grid и готово!

12. Формы для команды

Пора представить нашу красивую команду. Я хочу замаскировать фотографии людей шестиугольной формой, как маленький значок.Давайте перейдем в Insert> Shape> Polygon, изменим количество точек на шесть в Inspector и, возможно, изменим радиус его границы.

Для этого просто дважды щелкните фигуру, чтобы перейти в режим редактирования. Выделите все углы (щелкнув маленькие кружки при нажатой клавише Shift) и измените ползунок углов в Инспекторе на свой вкус. Наконец, выберите фигуру и изображение, которое вы хотите замаскировать, сгруппируйте их (Cmd + G), убедитесь, что изображение находится поверх фигуры, щелкните правой кнопкой мыши фигуру в списке объектов и выберите Использовать как маску.

13. Экспорт артборда

Когда результат вас устраивает и вы хотите его экспортировать, просто выберите монтажную область, и в Инспекторе вы увидите «Экспорт» и небольшой знак плюса справа. Щелкните по нему, и вы можете добавить столько разных разрешений и форматов, сколько захотите. Когда вы закончите, просто нажмите «Экспорт» в нижней части боковой панели.

14. Экспорт отдельных активов

Когда дело доходит до экспорта отдельных активов, это то же самое, что и выше.Может быть, вы хотите экспортировать эту кнопку. Выберите его и нажмите «Сделать экспортируемым» ниже в Инспекторе. Добавьте версии 1x и 2x для экранов Retina и нажмите «Экспорт».

Вы даже можете перетащить элемент прямо из списка объектов на рабочий стол, и он создаст из него PNG. Магия!

Words: Рафаэль Конде

Рафаэль Конде - эксперт в области дизайна, музыки и кофе. Следуйте за ним в Twitter по адресу @rafahari. Эта статья впервые появилась в 258 выпуске сетевого журнала.

Нравится? Прочтите это!

Вы нашли отличные уроки по Sketch или есть какие-нибудь творческие советы? Дайте нам знать в комментариях ниже!

.

Как оцифровать рисунок в Photoshop

Последнее обновление: 8 ноября 2019 г.

Цифровой рисунок стал одной из самых популярных техник среди художников. Чтобы превратить эскизы в цифровой дизайн, художники предпочитают использовать программное обеспечение, такое как Photoshop. Доступность уникальных функций и свобода исследования и экспериментов с рисованием в Photoshop - вот некоторые из причин, по которым цифровой рисунок так популярен.

Суть создания рисованного искусства состоит в том, чтобы сначала нарисовать произведение искусства на бумаге, холсте или любой другой поверхности.Сегодня, благодаря развитию технологий, художники могут превращать свои наброски и рисунки, сделанные вручную, в цифровые версии оригинальных работ.

Если вы никогда не оцифровывали рисунок в Photoshop, возможно, вы думаете, почему оцифровка - это хорошая идея, а не продажа оригинального рисунка. Что ж, нет никаких сомнений в том, что вы можете продавать как цифровые, так и оригинальные произведения искусства. Но, создавая цифровые произведения искусства, вы откроете двери для новых способов продажи своих работ в типографии.

Например, если вы каллиграф, вы можете взять оригинальный художественный принт и превратить его в футболку, кружку, декоративную подушку и т. Д.Вы можете продать лицензию на свою оригинальную работу другим компаниям, чтобы они могли использовать ее в своих продуктах.

Если вы новичок и хотите узнать, как оцифровать рисунок в Photoshop, то этот блог вам очень пригодится. Вы можете найти этот процесс похожим на иллюстратор, но он невероятно отличается. Давайте посмотрим на следующие шаги:

Шаги по оцифровке рисунка в Photoshop

01. Сканирование изображения

Первый шаг - отсканировать нарисованное от руки изображение и перенести его на компьютер.Чтобы добиться наилучшего качества, отсканируйте изображение с разрешением не менее 300 точек на дюйм. Чем выше пиксели, тем четче будет сканирование. По завершении сканирования перенесите файл на жесткий диск для безопасной передачи на компьютер.

02. Перенос отсканированного изображения в Photoshop

Следующим шагом в оцифровке рисунка в Photoshop является перенос рисунка в программу. После того, как изображение откроется в Photoshop, необходимо позаботиться о нескольких вещах:

a.Переименуйте и сохраните файл.

г. Увеличьте контрастность изображения.

г. Очистите изображение, удалив лишние пятна и грязные детали.

г. Закройте непреднамеренные пробелы в изображении, чтобы вы могли заполнить цвета с помощью инструментов и кистей.

эл. Если вы отсканировали изображение с использованием настроек цвета, вам может потребоваться удалить нежелательные цвета.

.

Превратите эскиз в цифровое искусство с помощью этого полного руководства

Идея любого дизайнера начинается на бумаге, а затем преобразуется с помощью программного обеспечения. Изучите основные шаги по превращению вашего эскиза в цифровое искусство с этим подробным руководством.

Процесс создания набросков и идей является важным этапом в рабочем процессе каждого дизайнера и иллюстратора. Создаете ли вы новый шрифт, плакат или простую иллюстрацию, очень важно записать свои идеи на бумаге, прежде чем переносить их на компьютер.

Прочтите, чтобы получить четыре основных совета по подготовке эскизов для компьютера, а также пошаговые инструкции о том, как оцифровать эскизы в трех различных программах для творчества: Illustrator, Photoshop и Procreate.


Основные советы, которые необходимо знать перед оцифровкой

Прежде чем вы начнете оцифровывать свои работы, давайте сделаем несколько важных шагов, которые помогут вам на этом пути. Эти четыре совета обеспечат плавный переход от бумаги к программному обеспечению.

Совет 1: всегда используйте чистый белый документ

Неважно, что вы рисуете, всегда важно начинать с чистого белого листа бумаги. Это гарантирует, что ваш рисунок будет правильно сканироваться позже. Цветная бумага может помешать процессу оцифровки.

Совет 2. Уточните свой эскиз

Многие художники и дизайнеры предпочитают в общих чертах рисовать идеи, прежде чем дорабатывать их позже. Когда у вас будет четкий рисунок, воспользуйтесь тонкой ручкой или маркером, чтобы отполировать эти схематичные линии.Ластики здесь также ваш друг, поскольку пятна и лишние линии часто могут затруднять сканирование и мешать процессу оцифровки. Чистые ластики очень важны, так как грязные ластики могут еще больше запутать ваши рисунки, размазав остатки грифеля карандаша.

Совет 3. Используйте кальку, чтобы перерисовать свои наброски

Чтобы продвинуться дальше в своих рисунках, я люблю использовать кальку и просматривать свои оригинальные эскизы. Этот тип бумаги слегка полупрозрачен, что дает вам возможность обводить оригинальные эскизы и еще больше совершенствовать их.Для дизайнеров, которые предпочитают иметь подробный эскиз, прежде чем переходить к этапу оцифровки, этот шаг является абсолютной необходимостью.

Совет 4. Отсканируйте бумагу с высоким разрешением

Сканирование ваших эскизов - последний шаг перед их использованием в программном обеспечении для проектирования. Чтобы обеспечить плавный переход от бумаги к программному обеспечению, отсканируйте свои эскизы с разрешением 300 PPI (пикселей на дюйм) или более. Чем больше пикселей на дюйм, тем четче будет сканирование.

Сканирование с более высоким PPI обычно имеет более высокое качество из-за большей плотности пикселей.Отдельные пиксели в изображении с разрешением 300 пикселей на дюйм значительно меньше, чем в изображении с разрешением 72 пикселей на дюйм. Меньшие пиксели позволяют более плавно сочетать цвет и форму. Если вы превращаете свой набросок в векторное изображение, то плотность пикселей не так важна; Если вы оцифровываете свой набросок в Photoshop, решающее значение имеет плотность пикселей.

Отсканировав рисунок, перенесите его на флэш-накопитель, чтобы его можно было перенести на компьютер.


Оцифровка эскиза в Illustrator

Превращение эскиза в вектор - одна из моих любимых техник для оживления рисунка.Обширная библиотека инструментов, цветов и эффектов Adobe Illustrator упрощает оцифровку. Более того, векторы обладают большим преимуществом при оцифровке ваших работ с их бесконечной масштабируемостью, плавными кривыми и меньшими размерами файлов.

Использованы текстуры из 50 Free Distressed Textures Pack.

Шаг 1. Загрузите отсканированное изображение в Illustrator

После того, как вы отсканировали изображение и поместили его на рабочий стол, создайте новый документ в Adobe Illustrator с помощью Command + N .Импортируйте сканирование с помощью Shift + Command + P , затем нажмите Place и щелкните монтажную область, чтобы увидеть, как ваш рисунок всплывает в Illustrator.

Назовите слой эскиза, дважды щелкнув Layer 1 на панели Layers и введя такое слово, как «Сканировать», а затем добавьте еще один слой со сложенным квадратным значком . Сделайте то же самое для нового слоя и назовите его как-нибудь вроде «Вектор». Это помогает различать два слоя и помогает отслеживать прогресс в плане позже.Вы также можете переключить значок блокировки , чтобы заблокировать все элементы этого слоя, или переключить значок глаза , чтобы включить или выключить видимость слоя.

Шаг 2. Используйте инструмент «Перо», чтобы обвести контур эскиза

На верхнем слое начните рисовать контур вашего эскиза с помощью удобного инструмента Pen Tool (P) . Вы можете редактировать кривые Безье по мере продвижения по эскизу или наметить линию, а затем вернуться и отрегулировать кривые с помощью инструмента Anchor Point Tool (Shift + C) .Чтобы управлять отдельными кривыми Безье, удерживайте клавишу Option при перемещении рычагов Безье.

Промойте и повторяйте, пока не покроете весь набросок. Если некоторые из ваших рисунков содержат геометрические фигуры, ускорите рабочий процесс с помощью инструмента Shapes Tool , чтобы быстро нанести эскизы на карту. Теперь, когда мы обрисовали весь набросок, пришло время добавить немного цвета.

Шаг 3. Заливка цветом

Прежде чем назначать цвет своим фигурам, подумайте, какую цветовую схему вы выберете.Для моих растений, представленных ниже, я выбрал приглушенную палитру, чтобы придать моему дизайну ощущение ретро. Цвет особенно важен в дизайне, поэтому найдите время и найдите несколько цветовых палитр, которые лучше всего подходят для вашей композиции.

Вам нужно немного цветового вдохновения? Посмотрите на эти 25 бесплатных ретро-палитр, 101 цветовую комбинацию или эти 20 сезонных палитр.

После того, как вы выбрали цветовую схему, импортируйте каждый оттенок в свою панель Swatches , чтобы упростить интеграцию цветов.С помощью инструмента выделения (V) щелкните фигуру, а затем выберите из образцов цвета, чтобы добавить ее в свой дизайн. Переключите цвета Fill и Stroke на X . Чтобы переключить цвет обводки на заливку, нажмите Shift + X . Продолжайте назначать цвета, пока не заполните свой дизайн.

Сделайте шаг вперед в своей иллюстрации, экспериментируя с режимами наложения или добавляя градиенты, текстуры, кисти или зернистость.


Оцифровка эскиза в Photoshop

Хотя процесс оцифровки иллюстраций в Photoshop похож на Illustrator, он кардинально отличается.Работа в растровой программе означает, что ваша иллюстрация будет содержать пиксели и иметь ограничения масштабируемости. Вместо того, чтобы обводить эскиз кривыми Безье, вы можете обводить эскиз кистями, если у вас есть планшет, или заполнить эти контуры с помощью меню Color Range.

Шаг 1. Загрузите отсканированное изображение в Photoshop

Начните с перетаскивания изображения эскиза в программу Photoshop. Вы можете либо щелкнуть изображение правой кнопкой мыши и выбрать Открыть с помощью> Adobe Photoshop , либо перетащить изображение поверх значка Photoshop на рабочем столе или панели инструментов.Это откроет новый документ с вашим отсканированным изображением.

Вы можете изменить размер или повернуть изображение по мере необходимости с помощью команды Free Transform ( Command + T ). Щелкните и перетащите углы, чтобы изменить размер, или поместите курсор за пределы углов, которые нужно повернуть.

Шаг 2. Отрегулируйте контрастность и уровни

Поскольку многие эскизы будут выглядеть немного светлыми на экране, важно увеличить контраст и поэкспериментировать с уровнями и кривыми .На панели «Слои , » вы можете вызвать эти корректирующие слои, щелкнув значок полузаполненного круга и нажав «Уровни» или «Кривые». Переместите ползунки, чтобы увеличить интенсивность белого и черного в вашем эскизе.

Я предлагаю поиграть с этими неразрушающими корректировками, чтобы увидеть, какие из них лучше всего подходят для вашего эскиза. Если вас не устраивает корректировка, просто щелкните слой и нажмите клавишу Delete .

После того, как вы настроили эскиз по своему вкусу, уплотните слои, удерживая Shift, щелкая Layer 1 и каждый корректирующий слой, затем нажимая Command + E .

Шаг 3. Добавьте цвет к линиям

Теперь давайте украсим ваш набросок несколькими цветами. Эту технику можно выполнить двумя способами: с помощью Color Range, чтобы выделить контуры в вашем эскизе, или с помощью кистей Photoshop. Если у вас есть планшет, вы можете легко просмотреть исходный набросок с помощью растровых кистей.

Перед тем, как мы добавим цвет в вашу иллюстрацию, добавьте новый слой, нажав сложенный квадратный значок на панели Layers . Отсюда вы можете активировать инструмент «Кисть » (B), и точно настроить внешний вид кисти в меню «Настройки кисти » (F5), .

Чтобы перейти к маршруту «Цветовой диапазон», вернитесь к исходному слою с эскизом, затем перейдите к Select> Color Range и щелкните пипеткой на белом фоне.Это выделит все области вашего дизайна белым цветом. Снизьте значение Fuzziness до 12 , затем нажмите OK .

Инвертируйте активное выделение с помощью Shift + Command + I , затем активируйте новый слой, который вы только что создали. С помощью инструмента «Кисть » (B) нарисуйте контур любым цветом на ваш выбор. При необходимости измените размер кисти на [/] .

Продолжайте закрашивать контуры, пока не раскрасите все аспекты иллюстрации.Когда вы закончите, нажмите Command + D , чтобы убрать выделение марширующих муравьев.

Шаг 4: заливка остальной частью цвета

Вернитесь к исходному слою с эскизом и активируйте инструмент Magic Wand Tool (W) . Щелкните оставшиеся части вашего эскиза и залейте его инструментом Кисть (B) на слое над исходным слоем эскиза. Это гарантирует, что вы не раскрашиваете прямо на исходном эскизе; вместо этого вы добавляете цвет на отдельный слой.Продолжайте добавлять цвет, пока не заполните весь набросок.

Совет по выбору: при одновременном выборе нескольких элементов нажмите и удерживайте Shift ; чтобы отменить выбор, нажмите и удерживайте Option key .


Работа с эскизами в Procreate *

Приложение Procreate - мощное приложение, предназначенное для создания эскизов, иллюстраций и прототипов произведений искусства. Он очень похож на настройку Photoshop в отношении библиотеки кистей, режимов слоев, различных эффектов и профиля растра.Но с его бесконечными функциями, инструментами и кистями это приложение для цифровых иллюстраций находится в особой лиге.

Procreate делает процесс оцифровки более естественным; с помощью стилуса он отслеживает степень давления и угол его использования, имитируя ощущение настоящей ручки и бумаги.

* Чтобы получить более подробную информацию о приложении Procreate, просмотрите это удобное руководство.

Шаг 1. Импортируйте эскиз в Procreate

Начните с импорта вашего эскиза в программу Procreate.Эскизное изображение можно сделать, сфотографировав иллюстрацию, или перенести на iPad по электронной почте. Я просто сфотографировал эскиз, так как качество изображения не имеет значения при рисовании поверх исходного эскиза. В главном меню Procreate выберите Photo , а затем выберите изображение эскиза из Camera Roll . Procreate автоматически создаст новый документ, содержащий ваше изображение.

После того, как вы импортировали изображение, измените размер или поверните изображение по мере необходимости, выбрав значок со стрелкой на верхней панели инструментов.Выберите Uniform , затем перетащите синие углы по мере необходимости, чтобы изменить размер изображения. Нажмите Поверните на 45 градусов , чтобы повернуть изображение в документе.

Шаг 2. Используйте кисти, чтобы обвести контур

Здесь начинается все самое интересное; Кисти Меню , несомненно, является одним из лучших аспектов Procreate. Щелкните значок кисти в верхней части программы, чтобы открыть библиотеку кистей. У вас под рукой множество стандартных кистей, от карандашей до текстурированных кистей.

Перед тем, как обвести исходный эскиз, создайте новый слой, щелкнув значок плюс на вкладке Слои . Здесь очень важно сохранять последовательность и организованность слоев; для каждой формы создайте новый слой и соответствующим образом переименуйте этот слой. Чтобы назвать свой слой, щелкните миниатюру слоя и выберите Переименовать .

Чтобы создать простой контур, я выбрал кисть Monoline Brush из раздела Calligraphy .Поэкспериментируйте с разными типами кистей, чтобы увидеть, что лучше всего подходит для вашей иллюстрации. Вы можете точно настроить параметры кисти, щелкнув имя кисти.

Нажмите на круг в верхней части программы, чтобы получить доступ к своим цветам. В приложении Procreate есть различные способы изменить цвета. Вы можете просматривать оттенки на вкладках Disc , Classic , Value и Palettes .

Шаг 3. Заливка остальной частью цвета

Procreate заполняет цвет с помощью метода ColorDrop .Просто активируйте слой, к которому вы хотите применить активный цвет, затем нажмите и перетащите круг в замкнутое пространство. Если контур заключен, капля цвета заполнит пространство; если абрис частично открыт, цветовая заливка распространяется на весь слой.

Промыть и повторить для остальных форм. Чтобы добавить некоторые текстурные элементы, активируйте команду Alpha Lock в миниатюре слоя и нарисуйте с помощью Charcoal или другой текстурированной кисти.


Обложка размером 32 пикселя.

Хотите узнать более важные советы и рекомендации по дизайну? Ознакомьтесь с этими статьями:

.

Sketch - Основы слоев

Слои - это строительные блоки для создания дизайнов в Sketch. Фигуры, группы и монтажные области - это все типы слоев.

Добавление слоев

Чтобы добавить слой, нажмите кнопку Insert на панели инструментов или пункт меню Insert в строке меню. Оттуда выберите тип слоя, который хотите добавить.

Выбор слоев

Чтобы выбрать слой на холсте, просто щелкните по нему. Когда вы это сделаете, вы увидите, что вокруг этого слоя появятся маркеры выделения.

Вы также можете выбрать слой в Списке слоев, щелкнув его имя.

Совет: Если вы не видите маркеры выделения, убедитесь, что они включены, выбрав View> Canvas> Show Layer Selection .

Выбор нескольких слоев

Чтобы выбрать несколько слоев, выберите свой первый слой, удерживайте и щелкните другой. Вы также можете удерживать и щелкнуть по уже выделенному слою, чтобы удалить его из выделения.

Как вариант, щелкните и перетащите из пустой области на холсте, чтобы выбрать любые слои в области выбора.

Удерживая при перетаскивании, будут выбраны только те слои, которые полностью находятся в области выбора.

Удерживая при перетаскивании, вы добавите слои к вашему выбору (или удалите текущие выбранные слои).

Удерживая при перетаскивании, вы удаляете все выбранные в данный момент слои из вашего выбора и добавляете все невыделенные слои в вашу область выбора.

Слева: перетащите, удерживая нажатой клавишу «Shift». Справа: Shift-Option-перетаскивание.

Вы также можете выбрать все слои в пределах определенной монтажной области, выбрав сам монтажную область и выбрав Edit> Select> Select All in Artboard в строке меню.

Выбор перекрывающихся слоев

Вы можете удерживать , чтобы выбрать второй слой под указателем вместо верхнего.

Если у вас есть более двух перекрывающихся слоев, вы можете щелкнуть, удерживая клавишу Control, выбрать Выбрать слой из контекстного меню и выбрать нужный слой.

Слои группировки

Группируя несколько слоев вместе, вы можете делать такие вещи, как перемещение и изменение их размера одновременно, переключать их видимость вместе или настраивать их свойства, такие как непрозрачность и режим наложения.

Как создать группу слоев

Чтобы создать группу, выберите два или более слоев на холсте и нажмите + G . Вы также можете выбрать Аранжировка> Группа .

Как разгруппировать слои

Выберите группу, которую вы хотите разгруппировать, и нажмите + + G .Вы также можете выбрать Упорядочить> Разгруппировать .

Выбор слоя в группе

Группы слоев обрабатываются как один, когда вы их выбираете. Чтобы выбрать отдельный слой в группе, дважды щелкните группу, а затем щелкните слой, который хотите выбрать.

Вы также можете, удерживая , щелкнуть слой в группе, которую хотите выбрать.

Чтобы отключить это во всем документе и автоматически выбирать слой в группе без двойного щелчка сначала, установите флажок ‌Включить щелчок для новых групп на вкладке слоев в настройках Sketch.

Вы также можете включить это для отдельных групп, выбрав группу, установив флажок Выбрать содержимое группы при нажатии опции в Инспекторе.

Подвижные слои

Чтобы переместить слой, просто щелкните его и перетащите. Если вы хотите ограничить движение определенной осью, удерживайте при перетаскивании.

Чтобы переместить слой, находящийся под другим слоем, убедитесь, что вы выбрали его, удерживайте + , а затем щелкните и перетащите в любое место на холсте.

Совет. Sketch автоматически выравнивает перемещаемые слои по соседним. Если этого не произошло, убедитесь, что направляющие включены в View> Canvas> Show All Guides

Как распределить и расположить несколько слоев с помощью Tidy

С помощью кнопки Tidy можно быстро распределить и выровнять несколько слоев в аккуратную сетку с распределенными разнесенными строками и столбцами. Для этого выберите слои, которые хотите привести в порядок, и нажмите кнопку Tidy в верхней части Инспектора.Ваша сетка заполнит пространство вашего выбора, и Sketch попытается расположить слои равномерно в строки и столбцы.

Перемещение нескольких слоев с помощью Smart Distribute

С помощью Smart Distribute вы можете быстро настроить равномерный интервал между несколькими слоями по горизонтали или вертикали. Для этого выберите два или более слоев, затем щелкните и перетащите указатель, который появляется между ними. Если у вас есть слои, расположенные в сетке, вы можете настроить интервал между каждым слоем в горизонтальной строке, а также вертикальный интервал между самими строками.

Smart Distribute не появится, если ваши слои распределены неравномерно. Чтобы исправить это, вы можете либо равномерно распределить слои вручную, либо использовать кнопку Tidy .

Для очень маленького выделения или когда вы слишком сильно отодвинули от вашего выделения, Smart Distribute управляет скрытием, чтобы слои было легче увидеть. Если вы не видите набор слоев Smart Distribute для вашего выбора, возможно, вам придется увеличить масштаб.

Примечание: Начиная с версии 67, Smart Distribute и Tidy работают с выбранными слоями, которые находятся внутри и вне разных групп.

Замена слоев в выделении Smart Distribute

Когда вы выбрали набор слоев с равномерным интервалом между ними, вы можете щелкнуть и перетащить круглый маркер, который появляется в центре любого слоя, чтобы переместить его в пределах этого выделения. Слои вокруг него автоматически поменяются местами с тем, который вы перемещаете.

Это также работает для целых артбордов, что делает его удобным для реорганизации целых потоков на холсте.

Дублирующие слои

Выберите слой и нажмите + D , чтобы создать дубликат поверх оригинала в точно таком же положении.Или удерживайте при перетаскивании слоя для создания дубликата. Оригинал останется на месте.

Совет: Если вы удерживаете и перетаскиваете, чтобы дублировать слой, затем сразу же нажимаете ⌘ + D , после этого Sketch создаст третий слой с точно таким же смещением, что и ваш дубликат.

Выравнивающие слои

Вы можете выравнивать слои с помощью шести кнопок выравнивания в верхнем ряду Инспектора.

Слева направо: распределить по горизонтали, распределить по вертикали, выровнять по левому краю, по горизонтали, по правому краю, по верху, по вертикали, по низу.

Если у вас MacBook Pro с сенсорной панелью, вы также увидите эти параметры при выборе группы слоев.

Sketch выровняет выбранный вами слой по его монтажной области (если вы их используете).

Если вы выберете два или более слоев, Sketch выровняет все по самому большому слою. Чтобы переопределить это и выровнять объекты по определенному слою, выберите этот слой и заблокируйте его ( + + L ), удерживайте ⇧, чтобы сохранить заблокированный слой выбранным, а затем выберите объекты, которые вы хотите выровнять.

Чтобы выровнять выделение из двух или более слоев на монтажной области, выберите свои слои, удерживайте и нажмите кнопку выравнивания, которую хотите использовать.

Распределительные слои

Вы можете распределять слои по вертикали и горизонтали, используя специальные кнопки в верхнем ряду Инспектора. Или вы также можете использовать Ctrl + + V или Ctrl + + H соответственно.

Кроме того, вы можете распределить слои с фиксированным интервалом с помощью инструмента «Создать сетку».

Каждый из этих методов учитывает подгонку пикселей.

Изменение размера слоев

Чтобы изменить размер слоя, выберите его, затем щелкните и перетащите любой из маркеров выделения. Ручки по бокам слоя регулируют высоту или ширину, а ручки по углам вместе регулируют высоту и ширину.

Удерживая , вы измените размер слоя пропорционально, сохраняя его высоту и ширину в том же соотношении.

Если удерживать , размер слоя будет изменяться от его центра, а не от края, от которого вы перетаскиваете.

Изменение размера слоев в Inspector

Вы также можете изменить размер слоя, выбрав его и введя его размеры в Инспекторе.

По умолчанию размер слоев будет изменяться относительно их левого верхнего угла, но вы можете изменить это, используя следующие сочетания клавиш:

л Масштаб слева (по умолчанию)
r Шкала справа
т Масштаб сверху (по умолчанию)
б Шкала снизу
c / м Шкала от центра / середины

Инспектор также позволяет использовать математику для изменения размера или перемещения слоев со следующим:

+ Добавить (e.грамм. 50 + 10)
- Вычесть (например, 45-5)
\ * Умножить (например, 128 * 2)
/ Разделить (например, 960/2)

Вы также можете использовать проценты для изменения высоты или ширины слоев относительно его группы или монтажной области. Например, установка высоты слоя на 10% на монтажной области шириной 960 пикселей изменит его ширину на 96 пикселей.

Наконец, если вы редактируете угловой радиус прямоугольника со скругленными углами, вы можете использовать ; , чтобы указать разные значения для каждого угла (например, 30; 40; 20; 30).

Совет: Если значок замка закрыт, размер слоя изменится пропорционально.

Изменение размера слоев с помощью сочетаний клавиш

Для точной настройки вы можете выбирать слои и изменять их размер, используя следующие сочетания клавиш:

+ Увеличить ширину на 1 пикс.
+ Уменьшить ширину на 1 пикс.
+ + Увеличить ширину на 10 пикселей
+ + Уменьшить ширину на 10 пикселей

Масштабирование слоев

Любые примененные стили (например, обводки, радиусы границ или размеры теней) останутся неизменными при изменении размера слоя.Чтобы они масштабировались пропорционально размеру вашего слоя, перейдите к Layer> Transform> Scale… или нажмите + K .

В меню «Масштаб» вы можете выбрать, будет ли ваш слой изменять размер от центра, сторон или углов.

Ограничения изменения размера

Ограничения изменения размера в Инспекторе позволяют вам выбирать, как слои будут вести себя при изменении размера монтажной области, группы или символа, частью которого они являются.

Совет: По умолчанию Sketch будет изменять размер слоев внутри группы или символа относительно их родительского элемента, включая любые отступы.

Если вы хотите, чтобы размер слоя изменялся относительно монтажной области, частью которой он является, выберите сам монтажную область и отметьте Настроить содержимое при изменении размера в инспекторе.

Чтобы установить ограничения изменения размера, выберите слой внутри монтажной области, группы или символа, чтобы отобразить элементы управления ограничениями изменения размера в Инспекторе.

Элементы управления справа позволяют указать, к каким краям родительского слоя будет прикреплен ваш слой, а элементы управления в центре позволяют указать, должны ли высота и ширина вашего слоя увеличиваться или оставаться на фиксированном размере.Справа есть предварительный просмотр, чтобы показать, как выбранные вами элементы управления влияют на поведение вашего слоя.

Фиксированный размер

Ограничения фиксированного размера сохраняют высоту или ширину (или общие размеры) слоя одинаковыми независимо от того, как изменяется размер его родительского слоя.

Это полезно, например, если у вас есть строка меню в интерфейсе, высота которой должна быть одинаковой, вне зависимости от того, насколько высока монтажная область, в которой она находится.

В этом примере высота символа меню фиксированная, а ширина - нет.Он будет изменять размер по горизонтали для устройств большего размера, но не растягивается по вертикали.

Прикрепить к краю

Прикрепить к краю фиксирует расстояние между слоем и определенным набором краев или углов его родительского элемента, независимо от того, как изменяется размер родительского слоя.

Это полезно, например, если у вас есть плавающая кнопка действия в интерфейсе, прикрепление ее к верхнему и левому краям гарантирует, что она остается на одинаковом расстоянии от угла монтажной области.

В этом примере кнопка имеет фиксированную высоту и ширину и прикреплена к верхнему левому краю.Он не будет изменять размер, и его положение останется неизменным при изменении размера родительского контейнера.

Последнее обновление 30 июн 2020

Нам очень жаль.
Сообщите нам, что вы искали:

Если вам нужна дополнительная помощь или вы хотите сообщить об ошибке в этом содержании, обратитесь в службу поддержки.

Ваш электронный адрес (чтобы мы могли вам ответить) Отправьте свой отзыв Отмена

Спасибо за ваш отзыв.

Произошла ошибка, повторите попытку позже.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий