Уроки » Веб-дизайн → Смайлик Yahoo!  

:
Создайте новый документ с размерами 250x250px и залейте фон градиентом, я использовал пурпурный. (#E9D5ED, #9533AD)

Смайлик Yahoo!


:
Создайте новый слой а затем создайте небольшое круглое выделение в середине документа, с помощью Elliptical Marquee Tool :elliptic: . Размер моего выделения 49x49px.

Залейте выделение цветом, я использовал #F7EE67

Смайлик Yahoo!


Примените следующие стили слоя.

Смайлик Yahoo!

Смайлик Yahoo!

Смайлик Yahoo!


:
Теперь добавим блик слева. Для этого создайте новый слой и загрузите выделение окружности (зажав CTRL щелкните по слою с окружностью).

Смайлик Yahoo!


Сожмите выделение на 1 пиксел (Select > Modify > Contract > 1px)
Залейте выделение на новом слое белым цветом #FFFFFF

Смайлик Yahoo!


Не снимая выделения, выберите любой инструмент для выделения и при помощи стрелок клавиатуры передвиньте выделение на 4 пиксела вправо и 1 пиксел вниз.

Смайлик Yahoo!


Нажмите на клавиатуре клавишу DELETE чтобы удалить внутреннюю часть выделения.



Приблизьте изображение чтобы было проще работать и сотрите 1 пиксел от блика как показано ниже.

Смайлик Yahoo!


Продублируйте слой с бликом (тот что в форме луны)
Первый слой (тот что выше) переименуйте в «Top», а второй в «Bottom»

На слое «Top» удалите нижнюю часть блика на слое «Bottom» верхнюю

Смайлик Yahoo!


Выберите слой «Top» и понизьте его непрозрачность (Opacity) до 90%

Выберите слой «Bottom» и понизьте непрозрачность до 60%

Смайлик Yahoo!


:
Теперь добавим глаз.
Создайте новый слой и создайте выделение размером 5x5px, залейте выделение цветом #2B37A5

Смайлик Yahoo!


Продублируйте слой с глазом и переместите его вправо, объедините слои (CTRL+E). Я переместил глаз вправо на 14 пикселей.

Смайлик Yahoo!


:
Теперь будем создавать рот.
Создайте новый слой и создайте выделение в виде окружности как показано ниже.

Смайлик Yahoo!


На новом слое залейте выделение черным цветом и с помощью Rectangular Marquee Tool :rectangu: создайте выделение в верхней половине рта.

Смайлик Yahoo!


Нажмите DELETE чтобы удалить верхнюю часть.

Смайлик Yahoo!


Теперь примените следующие стили слоя к слою со ртом.

Смайлик Yahoo!


Образец можете загрузить здесь.
gradient1.zip [422 b] (cкачиваний: 2)

Смайлик Yahoo!

Смайлик Yahoo!


:
На новом слое создайте выделение на всю ширину рта и 5 пикселей в высоту, это будут зубы.

Залейте выделение белым цветом.

Смайлик Yahoo!


Примените следующие стили слоя к слою с зубами.

Смайлик Yahoo!

Смайлик Yahoo!


Образец можете загрузить здесь.
gradient2.zip [449 b] (cкачиваний: 2)

Смайлик Yahoo!


Смайлик почти готов, можете добавить легкую тень с помощью Drop Shadow.

Смайлик Yahoo!


Если у вас все же возникли трудности, качаем PSD файл.
psd.zip [153,32 Kb] (cкачиваний: 2)

Информация к уроку:

Категория - Уроки » Веб-дизайн

Дата публикации: 16-02-2011, 00:28

Опубликовал: killot

Просмотров: 585

Комментариев: 0

Ссылки к этой статье:

Источник - Photoshop Star

Автор - Не указан

Переводчик - Killot

Найти - Все уроки с Photoshop Star

Ключевые слова:

PhotoshopStar, yahoo, web, smile, веб, смайлик

Еще по этой теме:

3D фотоэффект 3D фотоэффект
В этом уроке я попытаюсь объяснить, как из ...
Неоновая вывеска Неоновая вывеска
В этом уроке будем создавать текстовый эффект в ...
Интерфейс отверстия Интерфейс отверстия
В этом уроке мы создадим интерфейс маленького ...
Глянцевая кнопка Глянцевая кнопка
В этом уроке будем создавать вот такую ...
Шаблон «Гранж» часть 1 Шаблон «Гранж» часть 1
В этом уроке я покажу вам как создать стильный ...
Шаблон «Гранж» часть 2 Шаблон «Гранж» часть 2
Продолжение к уроку Шаблон «Гранж». В этом уроке ...
Завернутый текст Завернутый текст
Создаем текст, а затем заворачиваем буквы в ...
Значок звезды в стиле Web 2.0 Значок звезды в стиле Web 2.0
В этом уроке мы создадим символ звезды, который ...
Гладкая сфера
Создаем новый документ с размерами 350х350рх и ...
Пузырьковый текст Пузырьковый текст
В этом туториале, Вы научитесь создавать очень ...

Социальные закладки:


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 

Добавление комментария

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
Какому программному продукту посвящен данный ресурс
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: