04:48 Создаём акварельный дизайн для сайта в Фотошоп | |
Создаём акварельный дизайн для сайта в Фотошоп
Создаём акварельный дизайн для сайта в Фотошоп Стиль "акварель" в области графического дизайна в последнее время стал модным. Веб-сайты и дизайнеры достаточно часто используют этот стиль. В этом уроке Вы узнаете как использовать Архивную художественную кисть. создать неповторимый образ фона хедера и многое другое. Давайте начнем! Вот, что мы будем создавать:
нажмите на изображение, чтобы увеличить Для начала нарисуйте эскиз того что вы будете делать, чтобы потом иметь представление о том где поставить элементы в шаблоне. Вот мой набросок:
Шаг 1 - Настройка шаблона Скачайте PSD шаблон от 960 Grid System (Это не является обязательным, вы можете создать документ шириной в 960px и просто нарисуйте несколько направляющих), откройте шаблон, создайте новую группу и поместите туда все слои. После Вам необходимо увеличить ширину изображения, чтобы увидеть, как ваш проект выглядит на более широких разрешениях, для этого перейдите в "Изображение Размер холста" и увеличьте значение ширины до 1420 пикселей.
Затем перейдите на Filter-Other- Offset (Фильтр-Другое-Сдвиг) и сдвиньте изображение так, чтобы его границы были по центру. Далее используя инструмент Clone Tool (Инструмент Штамп ) уберите границу. После того как вы закончили клонирование, выделите всё (Ctrl + A) и копию отредактированного изображения вставьте в наш шаблон.
Используя инструмент Free Transform (Свободное трансформирование ) трансформируйте слой так, чтобы он покрывал примерно половину шаблона. После того как вы разместите первый слой с бумагой дублируйте его и поместите его возле первого слоя, таким образом вы будете покрывать фактически 960px области. Затем дублируйте эти слои дважды, чтобы разместить их слева и справа от границы ,чтобы покрыть всю поверхность холста, а затем объедините эти 4 слоя. затем дублируйте их по вертикали и разместите их ниже существующих, делайте это столько раз, сколько необходимо, пока не покроете все полотно. Наконец создайте группу "Фон" и поместите туда все слои текстуры.
Дублируйте слой и нажмите Ctrl + I чтобы инвертировать цвета, затем перейдите в панель Цветовой тон/Насыщенность (Ctrl + U) и уменьшите Насыщенность до -100, затем измените его режим смешивания на Overlay. Наконец объедините оба слоя "Пейзаж" и "Пейзаж копию" в один.
Шаг 5 - Используем Архивную художественную кисть Чтобы наше изображение выглядело как настоящая картина, выберите Архивная художественная кисть (Y) в Панели инструментов. Чтобы сделать это изображение особенным, первое, что вам нужно сделать, это моментальный снимок работы. Для этого перейдите в Window-History (Окно-История) для просмотра истории группы, и нажмите на кнопку "Новый снимок" внизу. Затем в панели Options, выберите кисть (я использую 36px Chalk tip) установите Режим. Нормальный. а Непрозрачность :25%. Стиль. Tight Short. Размер. 25px и Tolerance. 0%. Теперь легкими мазками превратите простое изображение в картину. После поиграйте с настройками и обработайте края изображения, чтобы закрасить границу.
Скачайте этот набор кистей, так как мы будем использовать их в течение всего процесса. Возьмите любую кисть, установите цвет переднего плана черный и кликните несколько раз. Эти кисти имеют различные помутнения, так что вы можете поиграть с ними, в случае если вы используете другие кисти вы должны изменить непрозрачность кисти и значение расхода каждый раз когда вы рисуете. Попробуйте разместить акварельные пятна по всей границе и в некоторых местах внутри изображения.
Для того, чтобы кодирование было немного труднее (шутка) мы добавим вертикальный градиент (# 96AFCE - #FFFFFF). Режим для слоя с градиентом Linear Burn (Линейный затемнитель ).
Используя Rounded Rectangle Tool
Шаг 9 - Дорабатываем блок контент Дублируйте слой "Контент" и поместите копию над ним. Установите Fill до 100% и скройте обводку. Теперь добавьте маску слоя и залейте его Линейным градиент (#000000 - #FFFFFF).
Используя Rounded Rectangle Tool
Шаг 11. Далее растрируйте слой "Контент" или преобразуйте его в смарт-объект, добавьте маску слоя к нему и, используя, мягкую черную кисть скройте верхнюю часть блока как показано на картинке.
Давайте добавим логотип сайта. Я использовал снова шрифт "Futura Std", цвета: # F2F6FC и # E1EDFF. Теперь возьмите любую кисть из набора (который мы скачали ранее), цвет(# 112C37) и кликните один раз на новом слое, поместите этот слой под слой с логотипом и изменить его режим смешивания на Soft Light (Мягкий свет). Создайте новую группу "Лого" и поместите туда эти два слоя.
Шаг 13. В целях увеличения визуального воздействия фона, добавьте больше акварельных мазков разных цветов, разместите их по всей верхней границы как раз над слоем "Пейзаж". Затем измените его режим смешивания на Overlay (Перекрытие). Наконец добавьте большое голубое небо (# 51D3D3) на новом слое любой кистью нарисуйте небо как на картинке ниже, и разместите данный слой прямо над слоем "Пейзаж" и ниже слоя "Контент" Затем измените режим смешивания на Overlay (Перекрытие) .
Использование реальных жизненных объектов в веб-дизайне очень модно, мы добавим реальное изображение кисти к нашему проекту. Откройте изображение извлеките часть кисти и вставьте его в шаблон.
Шаг 15. Добавляем реалистичную тень Дублируйте слой "кисть", назовите копию "Тень" и разместите его под оригиналом, а затем перейдите в панель Hue / Saturation (Цветовой тон/Насыщенность) и измените его Насыщенность до -100. Теперь перейдем в Filter-Blur-Gaussian Blur (Фильтр-Размытие-Размытие по Гауссу) радиус 4px, далее измените его непрозрачность до 50%.
Я всегда использую инструменты Dodge (Осветление ) и Burn (Затемнение ) после извлечения и добавления тени.
Добавляйте текст, я использовал шрифт Futura Std для заголовков и Tahoma (11px, Резкость: Нет) для основного текста, и серая линия, как разделитель (используйте инструмент Линия Давайте добавим поле для краткого текста. Нарисуйте Прямоугольник со скругленными углами, радиус 15px и заполните его зеленым цветом (# 434726), а затем применить стиль Stroke (Обводка) с тем же цветом и измените его значение Fill (Заливка) до 50%. Далее преобразуйте слой в смарт-объект и добавьте Маску слоя
Это абсолютно необязательный шаг, Вы можете добавить некоторые стили слоя для логотипа и названия, просто чтобы увеличить контраст между ними и фоном. Я просто на этот раз добавлю немного тени. Кроме того, мне не нравится, как выглядит кисть позади навигационной панели, поэтому я перемещу её вперед, но вы можете следовать вашим инстинктам и делать так, как вы предпочитаете.
Ниже в четыре-пять квадратных миниатюр остальные баннеры. Наконец добавьте синий (# 5D8CB6) треугольник (вы можете сделать это с помощью Polygon Tool (Инструмент "Многоугольник")), который указывает на активный баннер. Совет: Используйте реальные фотографии а не только наполнители изображения.
Некоторые существующие библиотеки включают опцию добавления какого-нибудь текста на баннере, в этом случае я буду использовать шрифты Futura Std для заголовков и Tahoma 11px для содержания. Используйте белый прямоугольник, Fill (Заливка) 50% и 1px белой обводки в качестве фона.
И так, самую трудную часть процесса мы уже закончили, но есть еще некоторые важные области слева, такие как боковая панель. Мы начнем с простого фона, используя Прямоугольник со скругленными углами (радиус 5 пикселей) нарисуйте белый прямоугольник. Измените Заливку слоя до 25% и добавьте Обводку 1px (#FFFFFF).
Добавьте несколько акварельных знаков в новый слой, выше фонового содержания. Любого подходящего к фону цвета.
Теперь мы добавим одно сообщение. Используйте шрифты Futura Std для заголовков и Tahoma для краткого описания и 1px в высоту строки как разделитель. После на новом слое нарисуйте один синий знак используя акварельную кисть для фона комментария,"Количество комментариев" напишите используя Futura и слово "комментарии" с Tahoma.
Пришло время добавить содержимое в боковой панели, и мы начнем с помощью кнопки RSS. Загрузите иконки .Откройте значок RSS, скопируйте и вставьте его в макет, добавьте RSS соответствующий текст: электронная почта, форма подписки, количество читателей и 1px высоту строки как разделитель.
Добавьте акварельный мазки в качестве фона. Над фоном нарисуйте прямоугольник с закругленными углами (радиус 5 пикселей), цвет: # 1D1D1D. Добавить Обводку 1px (#FFFFFF), значение Fill (Заливка) уменьшите до 50%. С помощью инструмента Текст и шрифта Tahoma напишите слово "поиск". Наконец загрузите этотIcon Pack и вставьте значок лупы как кнопку поиска. Положите все это в группу под названием "Поиск" или что-то вроде этого и перейти к следующему шагу.
Стандартный формат для креативной рекламы составляет 125 на 125 пикселей, поэтому мы добавим несколько блоков, на боковой панели. Совет: Чтобы сэкономить время, можно создать документ 125 на 125 пикселей с приятным дизайном заполнителя рекламы, а затем преобразовать его в смарт-объект и сохранять его где-то. Вы можете использовать его для многих конструкций без необходимости редизайна его каждый раз. Если у вас есть достаточно времени, вот список с большинством стандартных размеров объявлений (через объявление смысле Google). Рассмотрим работу над PSD с некоторыми заполнителей для них?
Как большой поклонник Twitter, я решил поставить заметную ссылку чуть ниже объявлений. Добавьте немного акварельного фона, копировать / вставить значок Twitter из библиотеки (обсуждалось в Шаге 24). Введите текст,"Follow Us" или что-то на подобии этого. Положите все эти слои в группу под названием "Twitter".
Используя прямоугольник с закругленными углами. нарисуйте белый прямоугольник с 1px серой (# 979797) Обводкой, чуть ниже блока "Twitter". Теперь нарисуйте три меньших прямоугольников за ними, они будут вкладки. Нарисуйте маленький белый прямоугольник между одной из вкладок и фон для активной вкладки.
Добавьте названия вкладок, я использовал шрифт Futura. За содержание я добавлю пару Последних сообщений на первой вкладке.
Этот футер будет очень простой, мы просто нарисуем несколько случайных акварельных знаков разных цветов, затем повторим процесс шагов 8 - 9, сделаем пару скругленных прямоугольников. Наконец, пора добавить текст футера, небольшой бар навигации и информация об авторских правах подходит совершенных там, к тому же я добавил 1px линию как разделитель. Вы же можете разработать футер, какой хотите.
Надеюсь, Вам понравилось! Конечно, этот урок является лишь небольшим примером того, что можно делать с помощью этого стиля в веб-дизайне, не стесняйтесь экспериментировать с техникой и удивлять нас чем-то новым!
Интересные записи | |
|
| |
(Инструмент Выделение ) выделите широкую часть изображения и вставьте её в основной документ и назовите слой что-то вроде "Пейзаж". Теперь сделаем изображение более похожим на картину чем на фотографию.
(Прямоугольник со скругленными углами )(U), радиус - 15px, нарисуйте прямоугольник начиная со второй направляющей слева и заканчивая предпоследней направляющей с права. Fill (Заливка) уменьшите до 35% и добавьте этому слою Обводку 1px (# FFFFFF) "Положение: Внутри". Вы можете назвать этот слой "Контент".
. и шрифт. который вам понравится (в уроке использовался "Futura Std") .
, чтобы сделать это).
к нему. Используйте большую, черные, мягкую кисть чтобы скрыть некоторые части фона, как в шаге 11. Наконец, вы можете добавить дополнительные детали, например, акварельный знак под текстовым слоем с "О нас", как показано на картинке ниже.
| Всего комментариев: 0 | |