1 Уроки Photoshop Создание дизайна сайта в мистическом стиле 2/4 Ср Сен 29, 2010 8:16 pm
Admin
Admin
2.Шаги 11-20
Шаг 11
Дублируем слой "Magic", выделяем его и заменяем текст на "Night". Затем придаем этому слою эффекты Outer Glow (#FFFFFF) и Gradient Overlay (#F9DA5B, #FEAE00, #FFD403). Настройте все параметры этих эффектов в соответствии с рисунком ниже.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 12
Теперь добавим облака в наш документ. Скачайте этот набор кистей и установите его в Adobe Photoshop. Выберите кисть 2464, установите ей размер 960 px в соответствии с минимальной шириной нашего документа. Установите цвет переднего плана #234B7F и поставьте отдельное большое облако в новый слой "cloud1". Поместите этот слой в папку "Background". Немного уменьшите высоту облака, чтобы были видны здания.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 13
Раз логотип светится, значит облако в этом месте должно быть светлее. Используя инструменты Dodge и Burn, немного осветлите участки облака рядом со светящимся логотипом и затемните нижние участки облака. Поставьте непрозрачность слоя "cloud1" в значение 50%.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 14
Создайте новый слой, назовите его "cloud2" и нарисуйте нам нем еще одно облако. Для этого выберите сами на свое усмотрение кисть из вышеуказанного набора, которая вам больше понравится, и используйте цвет переднего плана #5F83A5. Далее, используя инструмент Dodge, немного осветлите нижнюю часть облака.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 15
Повторите предыдущий шаг, но на это раз используя другую кисть и цвет переднего плана #36638C. Переместите новый слой выше слоя "cloud1". При необходимости отрегулируйте размеры слоя, а также воспользуйтесь инструментами Dodge и Burn для освещения и затемнения нужных участков.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 16
При помощи большой мягкой резинки подчистите нижнюю часть облака "cloud1", чтобы получился эффект исчезновения облака.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 17
А вот сейчас будьте внимательны, это важный шаг в нашей работе. Сейчас мы будем добавлять цвет фона для всего макета. Не забывайте, что мы рисуем не просто картинку, а дизайн сайта, в котором важнейшее место занимают информационные блоки. Используя инструмент Rectangle, нарисуйте векторный прямоугольник с цветом #0A1D37. Получившийся новый слой переместите ниже папки "Clouds". Обратите внимание: ширина прямоугольника должна ограничиваться внутренними вертикальными направляющими. Далее для слоя с прямоугольником выберите меню "Layer > Layer Mask > Reveal all..." и нарисуйте градиент от белого к черному. Это даст нам хороший эффект в верхней части прямоугольника. А теперь установите новую горизонтальную направляющую на то место, где заканчивается затеменение градиента. Это поможет нам при верстке HTML и CSS. Обратите внимание, что цвет прямоугольника от этой направляющей до самого низа должен быть однородным.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 18
Добавьте новый прямоугольник, он будет играть роль фоновой подложки. Используйте для него цвет #091525 и внешние вертикальные направляющие. Воспользуйтесь аналогичным градиентом, как в предыдущем шаге.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 19
В данный момент мы имеем в основном сформированный фон. Нам осталось лишь добавить некоторые детали. Сперва добавим к изображению RSS-иконку. Скачайте себе эту картинку и вставьте ее в новый слой. Назовем этот слой "moon-rss". Затем отрегулируем настройки Hue/Saturation с тем, чтобы сделать луну более желтой. И применяем к ней эффект Outer Glow с настройками, указаными на картинке ниже.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 20
Добавим маленькое облако с цветом #7997B3 в новый слой выше луны в палитре слоев. Затем большой мягкой резинкой удалим некоторые участки облака.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]]
Шаг 11
Дублируем слой "Magic", выделяем его и заменяем текст на "Night". Затем придаем этому слою эффекты Outer Glow (#FFFFFF) и Gradient Overlay (#F9DA5B, #FEAE00, #FFD403). Настройте все параметры этих эффектов в соответствии с рисунком ниже.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 12
Теперь добавим облака в наш документ. Скачайте этот набор кистей и установите его в Adobe Photoshop. Выберите кисть 2464, установите ей размер 960 px в соответствии с минимальной шириной нашего документа. Установите цвет переднего плана #234B7F и поставьте отдельное большое облако в новый слой "cloud1". Поместите этот слой в папку "Background". Немного уменьшите высоту облака, чтобы были видны здания.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 13
Раз логотип светится, значит облако в этом месте должно быть светлее. Используя инструменты Dodge и Burn, немного осветлите участки облака рядом со светящимся логотипом и затемните нижние участки облака. Поставьте непрозрачность слоя "cloud1" в значение 50%.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 14
Создайте новый слой, назовите его "cloud2" и нарисуйте нам нем еще одно облако. Для этого выберите сами на свое усмотрение кисть из вышеуказанного набора, которая вам больше понравится, и используйте цвет переднего плана #5F83A5. Далее, используя инструмент Dodge, немного осветлите нижнюю часть облака.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 15
Повторите предыдущий шаг, но на это раз используя другую кисть и цвет переднего плана #36638C. Переместите новый слой выше слоя "cloud1". При необходимости отрегулируйте размеры слоя, а также воспользуйтесь инструментами Dodge и Burn для освещения и затемнения нужных участков.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 16
При помощи большой мягкой резинки подчистите нижнюю часть облака "cloud1", чтобы получился эффект исчезновения облака.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 17
А вот сейчас будьте внимательны, это важный шаг в нашей работе. Сейчас мы будем добавлять цвет фона для всего макета. Не забывайте, что мы рисуем не просто картинку, а дизайн сайта, в котором важнейшее место занимают информационные блоки. Используя инструмент Rectangle, нарисуйте векторный прямоугольник с цветом #0A1D37. Получившийся новый слой переместите ниже папки "Clouds". Обратите внимание: ширина прямоугольника должна ограничиваться внутренними вертикальными направляющими. Далее для слоя с прямоугольником выберите меню "Layer > Layer Mask > Reveal all..." и нарисуйте градиент от белого к черному. Это даст нам хороший эффект в верхней части прямоугольника. А теперь установите новую горизонтальную направляющую на то место, где заканчивается затеменение градиента. Это поможет нам при верстке HTML и CSS. Обратите внимание, что цвет прямоугольника от этой направляющей до самого низа должен быть однородным.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 18
Добавьте новый прямоугольник, он будет играть роль фоновой подложки. Используйте для него цвет #091525 и внешние вертикальные направляющие. Воспользуйтесь аналогичным градиентом, как в предыдущем шаге.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 19
В данный момент мы имеем в основном сформированный фон. Нам осталось лишь добавить некоторые детали. Сперва добавим к изображению RSS-иконку. Скачайте себе эту картинку и вставьте ее в новый слой. Назовем этот слой "moon-rss". Затем отрегулируем настройки Hue/Saturation с тем, чтобы сделать луну более желтой. И применяем к ней эффект Outer Glow с настройками, указаными на картинке ниже.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
Шаг 20
Добавим маленькое облако с цветом #7997B3 в новый слой выше луны в палитре слоев. Затем большой мягкой резинкой удалим некоторые участки облака.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]]