Рисуем лого в стиле web 2.0
Учимся некоторым блико-карамельным приемам в стиле web 2.0 , и углубляем свои познания в фотошопе. Урок подробный, поэтому трудностей возникнуть не должно, все покажу и расскажу. Отложите на часик дела, приготовте себе чашечку кофе и запаситесь терпением — поехали!
1. Создаем форму
Соответственно открываем наш любимый PS, создаем документ и устанавливаем размер холста на 1000?600 пикселей. Далее инструментом Polygonal Lasso Tool (L) тыкая по рабочей зоне создаем форму, с которой дальше будем играться.
2. Заливаем цветом
Полученную форму заливаем цветом. Нажимаем Paint Bucket (G) и кликаем по форме, чтобы наш контур закрасилсяв цвет. У меня оранжевый - #ff9c00.
3. Используем 3d эффект
Нечего тяжелого, просто копируем слой существующего и сдвигаем его на несколько пикселей вниз и в право. Повторяем этот процесс несколько раз. Меняем цвет темнее или светлее (у меня #ffc66c – светло-оранжевый).
4. Крепим края
Чтобы выровнить углы и избавится от “рванности” краев выбираем снова Polygonal Lasso Tool (L) и на отдельных слоях сначало обводим ровные углы и заливаем тем же светло-оранжевым цветом.
5. Рисуем тени
Теперь дорисовываем тени в углах. Сделать это можно инструментом Burn Tool в режиме Shadow и чтобы они были четче выставляем большой процент плотности затемнения, я накрутил на 60%.
6. Затемняем форму
Забываем о толщинке и переключаемся на слой формы логотипа, который мы сделали в самом начале. Снова кликаем на Burn Tool или нажимаем клавишу (O) и аккуратно мазюкаем фигуру в указанных местах.
7. Добавляем обводку
Теперь удерживая CTRL кликаем по нашей главной форме (кликать нужно в списке слоев (Layers) по маленькому превью-рисунку), таким образом получая обводку. Далее жмем Select в верхней панеле > Modify и выбираем в списке > Border выставляем 2 пикселя. Я сделал немного иным образом обводку, но так вам будет легче.
8. Высветляем углы
Выбераем цвет, использованный вначале для толщинки (#ffab45) при зуме рисуем засветы на уголках, не перебарщивайте с opacity (прозрачностью), чтобы края не получились слишком топорными.
9. Усиливаем тени
Затемняем темным цветом (#800300) тени в углах. Резкие, интенсивные тени углов придаст больше контраста, тем самым улучшит вид нашего логотипа или иконки, рисунка на футболку в конце концов, считайте как хотите.
10. Тень от обводки
Делаем обводку объемной путем добавления тени, якобы исходящий от нее. Дублируем обводку с 7-ого шага, передвигаем на 2 пикселя в правую сторону и по пути Image > Adjustments > Brightness/Contrast выставляем Brightness -150 и Contrast +30.
11. Подтираем тень обводки
Для того чтобы сделать тень, которую только что отрисовали более реальной подтираем ее мягкой резиночкой – Eraser Tool (E) и по желанию кончики размываем Blur Tool (R).
12. Светлые тона
Тонируем наше искусство в более светлые тона (# ffa93c). Для этого делаем выделения, как это показано ниже и мягкой кисточкой тонируем указанные зоны. Вполне можете довериться своему вкусу и сделать по-своему.
13. Темные тона
На новом слое снова сделайте выделения, как они показаны ниже (это вы можете делать Quick Selection Tool (W) ) и теперь темным цветом (# 6b000) аккуратно тонируем выделенные части.
14. Улучшаем форму
Далее дополняем нашу форму дополнительной дорисовкой в некоторых местах. Создадите слой перед слоем формы и инструментом Polygonal Lasso Tool (L) и как в примере ниже дорисовываем и закрашиваем поля дополняя их тенями в необходимых местах. 
15. Снова заливаем нашу форму
Косым градиентом заливаем форму цветами снизу #ffa739, а сверху #e20001 в стилях слоя. Тоже самое можно и кисточкой сделать, предварительно вызвав контур фигуры, как это делать я уже описал ранее.
16. Добавляем блики
Здесь действуйте по вкусу. Не забывайте о быстром выделении (W), оно поможет вам быстро выделять зоны для будущих бликов. Здесь я их именно так и делал, далее выставлял в режиме Soft Light (блики должны быть на отдельных слоях) и подтирал резинкой в нежелательных местах. Ну и по краям немного замыливал блики (R).
Финальный результат
Дальше експерементируйте сами, в принципе можно остановится на достигнутом, как сделал это я. Скачать psd. Спасибо за внимание!
Загрузка ...
Январь 27, 2010 в 10:47
Ей-ей, догадывалась, что лучше мне и не пробовать рисовать такие вещи, а теперь убедилась окончательно. Количество бликов и теней… А сколько у вас занимает времени такая иллюстрация?
Январь 27, 2010 в 12:12
Гуд! Но это скорее пример как привести логотип в красивый вид для публикации в вебе.
Январь 27, 2010 в 16:47
Даша, на первый взгляд все кажется не легким, но после первого раза становится намного легче, все-равно приходится когда-либо с чего-либо начинать. Ну у меня навыков хватет за минуток 20-30 отрисовать подобную штучку.
Максим, от части ты прав.
Февраль 15, 2010 в 00:16
Спасибо, будем пробовать.
Февраль 15, 2010 в 21:22
Продолжение следует?
Февраль 16, 2010 в 00:46
По мере сил буду вылаживать авторские или переведенные, но не менее интересные уроки.
Февраль 22, 2010 в 18:13
А что иллюстратор не пользуемся?) как мне кажется в нем быстрее и лучше отрисовывать логотипы.
Март 18, 2010 в 17:02
дежавю…второй раз наталкиваюсь на один и тот же урок, видно судьба
все и вправду просто, вот только одна трудность, как у вас получается запасясь чашечкой кофе, всеж ее выпить до того как кофе остыл…после воплощения сего урока, он противно холодный 
Май 21, 2010 в 10:43
Очень интересный и самое главное эффектный урок. Лого получилось на славу. Тенденции Web2.0 оправдывают себя своим внешним видом)