Дизайн сайта с эффектом пикселизации в фотошопе

  • 27 августа 2011
  • 1
  • 11314

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

Ресурсы

Фотография танцовщицы в прыжке
Кисти облаков

Конечный результат:



Дизайн сайта с эффектом пикселизации в фотошопе


Шаг 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-пиксельную горизонтальную линию в нижней части футера и под ней напишите текст о правах.

Дизайн сайта с эффектом пикселизации в фотошопе
Ищите еще уроки фотошопа cs5 на нашем сайте.

Перевод: Хегай Глеб




Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Нужный, полезный урок. wink wink wink
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.