Записи сайта за месяц августа, 2007.

:

В этом номере мы узнаем, как нарисовать плакат «Осторожно: опасно!» в Фотошопе.

значок радационной опасности

заливка красным цветом

Шаг 1. Создаем новый документ (Ctrl+N) и заливаем его красным (#780000) цветом.

custom shape tool
знак

Шаг 2. Добавлем новый слой (Ctrl+Shift+N) и, используя Custom Shape Tool (Произвольня фигура (U)), рисуем значок радиационной опасности (обратите внимание, что фигуру на рисовать в режиме Filling pixels (заливка пикселей)).

radial gradient

Шаг 3. Изменим фон с плоского цвета на Градиентную заливку. Для этого зададим: #830506 — Основной цвет (Foreground Color) и #370000 — Фоновый цвет (Background Color). И проводим Радиальным Градиентом (Gradient Tool в режиме Radial Gradient) так, чтобы получилось, как на рисунке

fibers

Шаг 4. Добавим текстуры. Дублируем слой с Градиентом и идем Filter>Render>Fibers (Фильтр>Рендеринг>Волокна), параметры фильтра оставляем заданные «по-умолчанию». Opacity (Непрозрачность) данного слоя снижаем до 30%.

free transform

Шаг 5. Дублируем слой с текстурой (Ctrl+J) и нажимаем Ctrl+T для вызова Инструмента Free Transform (Свободная Трансформация), которым мы поворачиваем текстуру на 90 градусов.

custom shape tool

Шаг 6. Для усиления эффекта драматизма затемним с помощью большой черной мягкой Кисти края плаката.

обводка

Шаг 7. Добавим обводку к нашему значку. Создаем новый слой под слоем со значком и, удерживая Ctrl, кликаем по миниатюре слоя со значком (находясь при этом на новом слое). Дальше идем Select>Modify>Expand (Выделение>Модификация>Расширить), задаем там 8 пикселей и нажимаем Ок. Затем заливаем (Shift+F5) эту область черным цветом и выставляем Непрозрачность (Opacity) данного слоя на 25%.

radial gradient

Шаг 8. Добавим объема значку. Создаем новый слой и располагаем его над слоем со значком. Загружем в новый слой выделение по контуру знака (как мы делали это в прошлом шаге) и закрашиваем его Радиальным градиентом: Foreground color — #fffefe, Background color — #b4b4b4.

lens flare

Шаг 9. Теперь, создадим ещё один новый слой (сделав его самым верхним), закрасим его черным цветом, идем Filter>Render>Lens Flare (Фильтр>Рендеринг>Блик) и добиваем картинки, как на рисунке внизу. Режим Смешивания для данного слоя ставим Overlay (Перекрытие), Непрозрачность снижаем до 45%.

wave

Шаг 10. Далее идем Filter>Distort>Wave и искажаем пропорции блика.

плкая радиоактивной опасности

Шаг 11. Ну вот и все! Можно ещё внести небольшие изменения для улучшения внешнего вида, но это уже, как говориться, по желанию.

:

В этом уроке мы узнаем как нарисовать макет сайта в Фотошопе. Урок длинный, но конечный результат того стоит. Он волшебный :).

макет сайта волшебной ночи в фотошопе

параметры документа

Шаг 1. Создаем новый документ (Ctrl+N) размером 960*1000 пикселей, цветовой режим — RGB. Расставляем Направляющие (guides) по краям документа и идем в Image>Canvas Size (Изображение>Размер холста), чтобы изменить размер файла (см. рисунок). Добавляем еще одну направляющую, чтобы отделить Шапку (header) сайта.

направляющие
шапка сайта
размер холста

guide

Шаг 2. Еще одну вертикальную направляющую выставляем в центре документа. Заливаем Фоновоый (Background) слой темно синим Радиальным Градинтом (Radial Gradient), как показано на рисунке (цвета градиента: #0D2B53 и #010D1F).

radial gradient
радиальный документ

облака

Шаг 3. Скачайте эту фотку с облаками и поместите её в наш файл на новый слой «Clouds», Режим Смешивания (Blending Mode) для данного слоя установите — Overlay (перекрытие). Далее идем Layer>Layer Mask>Hide all (Слой>слой-маска>Скрыть всё) и проводим по этой маске Радиальным Градиентом «от белого к черному», как показано на рисунке. После этого вызываем для слоя с облаками Уровни (Levels (Ctrl+L)) и затемняем облака.

слой с облаками
радиальный градиент

levels
overlay

channel mixer

Шаг 4. Скачиваем и помещаем в наш документ на слой «skyline» ещё один файл. Идем Layer>New Adjustment Layer>Channel Mixer (Слой>Новый Корректирующий слой>Микширование каналов) и, в появившемся окошке, ставим галочку у пункта «Использовать предыдущий слой для создания обтравочной маски». В окне «Channel Mixer» выбираем пункт «Black & White with Blue Filter (RGB) (Черно-белый с синим фильтром (RGB))» и нажимаем Ок. Режим Смешивания для слоя «skyline» задаем Overlay.

микширование каналов
overlay

brush tool

Шаг 5. К слою «skyline» добавляем маску слоя в режиме Reveal all (Показать все). Используя большую мягкую черную Кисть (Brush), скрываем границы перехода (закрашиваем черным их на маске слоя). Затем, применяя эти Кисти от Kelzky13, делаем края переходов более естественными.

brush
кисть

рисуем кистью
скрываем переходы

logo

Шаг 6. Пишем слово «Magic» (для этого мы использовали шрифт Scriptina). К слою с текстом применяем следующие Стили Слоя: Outer Glow (#9EB6D0) и Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, #FFFFFF). Кроме этого пришло время начать организацию слоев в отдельные папки. Для начала создадим папки «Background» и «Logo», и положим туда соответствующие слои (см. нижний рисунок).

outer glow
gradient overlay

разнесение по папкам

звездная кисть

Шаг 7. Скачаем ещё один набор Кистей (созданный BL1nX). На новом слое «Stars1» в новой папке Stars, находящейся в папке Background, рисуем белой 500-той Кистью из нового набора звезды. Для этого слоя применяем Стиль Слоя — Gradient Overlay (Наложение Градиента) (#3A8FEF, #FFFFFF и #66C9FC).

магия
наложение градиента

слои

brush tool

Шаг 8. На новом слое «Stars2» рисуем звездную пыль (Кисть номер 650), при необходимости, стирая лишнее Ластиком (Eraser Tool (E)). Стиль Слоя — Outer Glow (Внешнее свечение) — #8AB2FF.

eraser
outer glow

magic

Шаг 9. Добавляем еще звезд на слое «Stars2», стираем лишнее Ластиком и применяем Стиль Слоя — Gradient Overlay — #6AB1D1, #FFFFFF, #94CFED и #FFFFFF.

ластик
стираем

gradient overlay

рисуем кистью

Шаг 10. Скачиваем ещё один набор Кистей. Выбираем Кисть номер 148, размер — 65 пикселей, цвет — белый и рисуем на новом слое пятнышко над буквой I. Применяем к этом слою Стиль Слоя — Outer Glow (цвет свечения — #00BCF9).

внешнее свечение
магия

night

Шаг 11. Копируем слой со словом Magic, заменяем его на Night и размещаем, как на картинке внизу. Стили Слоя — Outer Glow (#FFFFFF) и Gradient overlay (#F9DA5B, #FEAE00, and #FFD403).

gradient overlay
outer glow

работа с текстом

brush
free transform

Шаг 12. Добавим облаков. Скачиваем redheadstock’s Кисти. выбираем кисть номер 2464, диаметра 960 пикселей и #234B7F цвета. Создаем новый слой «cloud1» и одократно кликаем там кистью. Теперь, перемещаем новый слой в папку Background и меняем размер облака (Ctrl+T).

dodge

Шаг 13. Выбираем Инструменты Dodge (Осветлитель) и Burn (Заткмнитель) и, соответственно, затемняем облако снизу и осветляем сверху. Непрозрачность (Opacity) этого слоя ставим — 50%.

burn
opacity

рисуем кистью

Шаг 14. На новом слое «cloud2» добавляем ещё облаков (мы для них использовали #5F83A5 цвет). Затемнить и осветлить их можно также, как это делалось в предыдущем шаге.

облака
осветлитель

рисуем кистью

Шаг 15. Повторяем предыдущий шаг, только теперь используем другую Кисть (цвет — #36638C) и рисуем облако на слое «cloud1». Затемнение, осветление и изменение размера — по желанию.

облака
затемнитель

меняем размер

ластик

Шаг 16. Выбираем мягкий Ластик и стираем нижнюю часть облака на слое «cloud1», чтобы получился эффект плавного перехода.

прямоугольник

Шаг 17. Переходим от шапки к телу сайта. Рисуем на новом слое прямоугольник #0A1D37 цвета (слой с ним должен находиться под папкой со слоями с облаками). Обратите внимание, что прямоуголник находится в пределах сделанных в самом начале направляющих. Далее идем Layer>Layer Mask>Reveal all и на этой маске проводим черно-белый градиент (см. рисунок). В конце отметим еще одной направляющей место перехода цвета в фон.

тело сайта
направляющая

навигация
маска слоя

Шаг 18. Добавим (опять на новый слой) ещё один прямоугольник, который будет использоваться в дальнейшем под навигацию. Цвет у него пусть будет — #091525, Маска слоя — как в предыдущем шаге.

луна

Шаг 19. Нарисуем необычную Rss-иконку в шапке нашего сайта. Для этого, для начала, скачаем фото луны и помещаем его на новый слой «moon-rss». После этого регулируем значения Hue/Saturation (Ctrl+U) и добавляем Стили Слоя — Inner Glow и Outer Glow.

hue saturations
небо

outer glow
inner glow

звездная шапка

рисуем облако
стираем ластиком

Шаг 20. На новом слое (находящемся над слоем с луной) рисуем маленькое облако #7997B3 цвета. Лишние места стираем Ластиком.

rss-иконка

Шаг 21. На новый слой (находящийся под слоем с облаком, но над слоем с луной) добавляем классическую фигуру Rss-иконки (#DCA30B цвета) и применяем к ней Стили Слоя, показанные внизу. Ну и в конце, добавляем звездочку, как в Шаге 10.

gradient overaly
outer glow

drop shadow
звездочка

move

Шаг 22. Помещаем эту фотку на новый слой, она будет служить фоном под основную навигационную панель. Передвигаем её в нужное место (Move Tool (V)), изменяем размер (Ctrl+T) и деформируем (Flag warp).

free transform
растяжение

warp
навигационная панель

прямоугольник
тело сайта

Шаг 23. Затемняем (Burn Tool) некоторые места меню, чтобы увеличить иллюзию трехмерности.

gradient overlay

Шаг 24. Добавим текстуру с помощью Стилей Слоя Gradient Overlay (#045F96 и #FBF4BD) и Pattern Overlay.

pattern overlay
навигационное меню

луна

Шаг 25. Отбросим тень от навигационного меню. Для этого создадим его копию, с помощью Hue/Saturation (Ctrl+U) Обесцвечиваем её (ползунок Lightening на -100) и размываем немного. После этого с помощью Инструмента Free Transform (Свободная Трансформация (Ctrl+T)) искажаем тень

hue saturations
небо

рисуем облако

Шаг 26. Добавим немного облаков (также, как мы делали в Шаге 15) и текст (шрифт — Georgia — Italic). Для обычных ссылок будет использовать #0B1827 цвет, а для посещенных — #211808 цвет. Различные декоративные элементы (звездочки, линии) добавляются по желанию.

трансформация
текст в меню

декоративные элементы

кисти

Шаг 27. Последним шагом в работе с меню, проведем по нему несколько раз разноцветными рассеивающими Кистями. Непрозрачность для слоя с ними (Stars) зададим в 40%.

линия
меню

text

Шаг 28. Добавим текст к RSS-иконке. Для этого мы использовали шрифт Aria высотой 10 px желтого (#F2C90D) и белого (#FFFFFF) цветов.

воздушный шар

Шаг 29. В качестве дополнительной детали добавим воздушный шар. Отделяем его от фона, помещаем в наш файл и применяем к нему Стиль Слоя — Color Overlay (#1F416E — Blending Mode: Overlay) и, при желании, затемняем с помощью Burn Tool.

color overlay
расположение слоев

stars
звезды

Шаг 30. С помощью Кисти номер 615, добавим ещё звезд. А с помощью обычной 3px нарисуем веревочку у нашего шарика.

контент

Шаг 31. Начнем добавлять контент на наш макет. На новом слое «Post» вбиваем Заголовок и дату. Можно ещё добавить звездочку рядом с датой.

текст < /td>

Шаг 32. Продолжаем добавялять основные элементы будущего сайта (всё помещаем в папку «Post»). У нас это будет превью картинки размером 200*200 пикселей и обводкой 1 пиксель, заготовка под текст справа от неё, превью количества комментариев (для него создадим отдельную папку куда поместим цифры и декоративные элементы — облачко и звездочки), тэги под постом со звездой и разделительная Линия #1D324F цвета. После этого дублируем папку с постом нужное количество раз.

комментарии
тэги

шаблон сайта

облако< /td>

Шаг 33. Займемся боковой панелью сайта. Нарисуем окно Поиска (Search). Создадим новую папку «Sidebar», а внутри неё другую — «Search». Нарисуем в папке поиска облако и форму поиска в виде прямоугольника с тонкой 1 пиксельной обводкой #697372 цвета. Непрозрачность заливки поставим на 50%.

окно поиска
обводка

непрозрачность заливки

stars
search go

Шаг 34. Добавляем звезд, воздушный шарик и надпись Georgia Italic шрифтом и #D5A934 цветом. И по аналогии рисуем кнопку «Go!»

пункты меню
папки

Шаг 35. Вбиваем пункты меню (каждую секцию помещаем в отдельную папку) и добавляем, при желании, разнообразные фоновые элементы. Основные линии лучше определить направляющими.

боковое меню

Шаг 36. Теперь, давайте нарисуем дно нашего меню. Для этого рисуем несколько облаков, обработаем их, добавляем звезд и воздушных шаров. Следите за тем, чтобы они не выходили за пределы отведенные под боковое меню.

облака
звезды

воздушный шарик
дизайн сайта

кисть

Шаг 37. Ну и наконец, создадим футер (дно) нашего сайта (в отдельной папке «Footer»). Сотрем лишнее на маске слоя основного синего слоя и добавим облаков #0B1C38 и #223E63 цвета. Не забываем про направляющие и непересечение различных частей сайта.

рисунок
rss-иконка

облако
маленькое облако

синее облако
направляющая

burn

Шаг 38. Затемняем облака и рисуем красивое скопление звезд с помощью различных Кистей.

stars
brush

млечный путь
ластика

footer

Ну вот и все! Наш волшебный звездный макет сайта готов!

макет сайта волшебной ночи в фотошопе