Урок по созданию дизайна для сайта с эффектом пикселизации
Ресурсы, нужные для урока (можно использовать свои):
Фотография танцовщицы в прыжке
Конечный результат:
Шаг 1 Создайте новый документ в Фотошопе (Ctrl + N) размером 1000х1000 пикселей. Создайте направляющие через главное меню Просмотр > Новая направляющая (View > New Guide): две вертикальные на отметках 50 и 950 пикселей и одну горизонтальную на отметке 500 пикселей.
Шаг 2 Создайте новый слой (клавишами Ctrl + Shift + N) и назовите его “header”. Инструментом Прямоугольная область (Rectangular Marquee Tool) (M) сделайте выделение верхних 500 пикселей холста. Выберите инструмент Градиент (Gradient Tool) (G), в настройках инструмента установите Стиль (Style) – Линейный (Linear), Цвет – от #ebeaeb к #f5f5f5. Сделайте заливку выделения, как показано ниже. Затем уберите выделение (Ctrl + D).
Создайте новый слой (Ctrl + Shift + N) и назовите его “dark footer”. Сделайте выделение нижних 500 пикселей холста и залейте его цветом # 1c1c1c.
Шаг 3 Создайте новый слой (Ctrl + Shift + N) и назовите его “clouds pixelated”. Установите цвета по умолчанию (D). Сделайте выделение слоя “header” (удерживая Ctrl, кликните на иконке слоя в палитре слоёв). Находясь на слое “clouds pixilated”, перейдите в меню Фильтр > Рендерниг > Облака (Filter > Render > Clouds).
Понизьте Непрозрачность (Opacity) слоя “clouds pixelated" – 20%.
Теперь пройдите в меню Фильтр > Оформление > Мозаика (Filter > Pixelate > Mosaic) и введите значение Размера ячейки (Cell Size) 25 квадратов. Нажмите ОК и у Вас будет эффект пикселизации на шапке сайта.
Шаг 4 Выберите инструмент Лассо (Lasso Tool) (L) и в настройках сверху установите значение параметра Растушевка (Feather) – 50 пикселей. Сделайте выделение правой нижней части холста. Примените фильтр Облака (Фильтр > Рендерниг > Облака) (Filter > Render > Clouds) и повторите шаг 3 для создания эффекта пикселизации в футере.
Шаг 5 Теперь нам понадобится набор кистей облаков, предоставленный в начале урока.
Создайте новый слой (Ctrl +Shift + N) и назовите его “clouds”. Выберите инструмент Кисть (Brush Tool) (B), загрузите кисти облаков и одной из них нарисуйте облака в области шапки сайта.
Понизьте Непрозрачность (Opacity) слоя до 20%.
Шаг 6 Откройте фотографию девушки-танцора. Любым способом извлеките её из фона и вставьте в наш документ.
Можно использовать метод извлечения при помощи инструмента Перо (Pen Tool) (P). Обрисуйте девушку этим инструментом в режиме Контуров (Paths). Закройте контур и преобразуйте его в выделение (Ctrl + Enter). Теперь выделение можно перенести в основной документ при помощи инструмента Move Tool (V), либо скопировать (Ctrl + C) и вставить (Ctrl + V).
Если фон фотографии девушки белый, то используйте инструмент Волшебная палочка (Magic Wand Tool) (W). Кликните на фоне, чтобы его выделить. Потом инвертируйте выделение (Ctrl + Shift + I) и можно будет перетаскивать девушку в основной документ.
В основном документе расположите её, как показано ниже.
Сделайте копию слоя с девушкой (Ctrl + J) и расположите её под оригиналом. Инструментом Свободное трансформирование (Ctrl + T) уменьшите размер нижней копии и примените фильтр Мозаика (Фильтр > Оформление > Мозаика) (Filter > Pixelate > Mosaic).
Понизьте Непрозрачность (Opacity) нижнего слоя с девушкой до 35%.
Шаг 7 Нужно сделать так, чтобы девушка сильно выделялась. Создайте новый слой под слоем с девушкой и назовите его “highlight”. Выберите инструмент Градиент (Gradient Tool) (G): Стиль (Style) – Радиальный (Radial), Цвет – от белого к прозрачному. Сделайте заливку, как показывают стрелки на изображении ниже.
Шаг 8 В верхней левой части холста напишите название сайта при помощи инструмента Горизонтальный текст (Horizontal Type Tool) (T) и направляющих. Настройки шрифта:
Шрифт (Font Face): St Atmos Free
Размер (Size): 72pt
Цвет (Color): #000000
Кернинг (Kerning): 0
Стиль (Styling): Normal
К тексту нужно применить несколько стилей слоя. Кликните дважды на текстовом слое, чтобы открыть окно стилей. Примените следующие стили:
Внутренняя тень (Inner Shadow):
Режим наложения (Blend Mode): Умножение (Multiply)
Цвет (Color): #000000
Непрозрачность (Opacity): 50%
Угол (Angle): 120
Смещение (Distance): 1px
Стягивание (Choke): 0%
Размер (Size): 1px
Наложение градиента (Gradient Overlay):
Режим наложения (Blend Mode): Нормальный (Normal)
Непрозрачность (Opacity): 100%
Градиент (Gradient): от #000000 к #444444
Результат:
Шаг 9 Теперь при помощи текстового инструмента нужно добавить меню, заголовок и приветствие. Настройки шрифта:
Меню:
Шрифт (Font Face): Georgia
Размер (Size): 18pt
Кернинг (Kerning): 50
Цвет (Color): #000000
Заголовок:
Шрифт (Font Face): Georgia
Размер (Size): 36pt
Кернинг (Kerning): 50
Цвет (Color): #515151
Текст приветствия:
Шрифт (Font Face): Georgia
Размер (Size): 18pt
Кернинг (Kerning): 0
Цвет (Color): #505050
Шаг 10 Теперь добавим кнопку с надписью “want to work with me?”. Для этого инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) (U) создайте фигуру с радиусом 35 пикселей. Выберите инструмент Градиент (Gradient Tool) (G): Стиль (Style) – Линейный (Linear) и сделайте заливку прямоугольника градиентом от #24a9da к # 00729d. Потом текстовым инструментом напишите нужную фразу.
Сделайте выделение слоя с прямоугольником (удерживая Ctrl, кликните на иконке слоя в палитре слоёв). Создайте новый слой (Ctrl + Shift + N) и назовите его “pixels button”.
Повторите процесс создания эффекта пикселизации для кнопки: сначала создайте облака и потом примените фильтр мозаики. Затем установите Режим наложения (Blending Mode) на Перекрытие (Overlay).
Шаг 11 Создайте новый слой (Ctrl + Shift + N) и назовите его “arrow”. Инструментом Лассо (Lasso Tool) (L) создайте треугольное выделение в нижней части шапки сайта и залейте его тёмно-серым цветом.
Шаг 12 Сейчас мы создадим текст в стиле водяного знака. Над футером напишите текст.
Параметры шрифта:
Шрифт (Font Face): Georgia
Размер (Size): 60pt
Кернинг (Kerning): 50
Цвет (Color): #313131
Шаг 13 Используя направляющие, добавьте три небольших изображения (примеры работ).
Шаг 14 Под каждым изображением напишите текст (подпишите примеры работ). Потом при помощи инструмента Линия (Line Tool) (L) добавьте 1-пиксельную горизонтальную линию в нижней части футера и под ней напишите текст о правах.
Перевод: Хегай Глеб (специально для csphotoshop.ru)
Англоисточник: psd.fanextra.com
Дизайн сайта с эффектом пикселизации
