Иконка чашки в Фотошопе

На этот раз перед вами перевод урока от известного веб-дизайнера Collis, основателя целой череды веб проектов, в том числе tutsplus.com В этом уроке Collis пользуясь дедовскими методами покажет как легко и просто, всего из пары окружностей можно построить Иконку чашка кофе. Но главное не методы, а понимание теней, которые Collis использует для того, чтобы имитировать трехмерность сцены. Данные приемы незаменимы при работе в веб-дизайне.

И ещё одна важная деталь. Урок строится на умелом применении инструмента градиентов Gradien Tool. При этом как им пользоваться в уроке не написано. Если вы не знаете как делать градиенты, то вам прямая дорога в урок Как в Фотошопе сделать Градиент.

В этом уроке мы используем несколько окружностей и градиентов, чтобы создать чашку кофе с дымом. Конечно не настоящим дымом, а просто горячим испарением от кофе. И процесс и результат пригодятся вам в вашей дальнейшей работе с Фотошопом.

Создаем окружность

Начнем с простого голубого градиента пастельных тонов. Учтите что в этом градиенте более светлую часть я поместил выше. Это тоже важно, ведь мы создаем впечатление будто свет исходит с верхней стороны рабочей области, и уже на основе этой информации, мы примем решения о расположении остальных градиентов. Над голубым градиентом поместите новый слой с белой окружностью.

Выделяем окружность

Далее нажмите CTRL и кликните по иконке слоя с окружностью чтобы выделить пиксели. Затем примените Select > Modify > Contract и используйте значение около 12px. Эта команда уменьшает область выделения.

Новая окружность иконки

Теперь уже на новом слое заполните выделение градиентом от очень светло серого, до светло серого. Светлая сторона должна идти с нижнего левого угла. Мы выстраиваем градиенты именно в таком порядке, потому что блюдце углубляется внутрь, и свет, падающий с верхней стороны создает тень, которая теряет силу к нижней левой стороне блюдца. Такое выстраивание теней создает подобие 3D эффекта.

Сложное выделение

Теперь, зажмите CTRL и выделите заднюю окружность, затем нажмите ALT+CTRL и кликните по иконке слоя верхней окружности. CTRL прибавляет выделение а ALT отнимает. Таким образом вы получите выделение в форме кольца.

Залейте эту область выделения новым линейным градиентом, с нижней левой стороны до верхней правой. И снова это делается для имитации трехмерности.

Рисуем тень

Далее создайте слой под всеми слоями, CTRL+клик по иконке слоя оригинальной окружности, затем нажмите на нижнюю и левую стрелочки на клавиатуре, чтобы сдвинуть выделение. Залейте это выделение темно-синим.

Как видите, тень легла на левую нижнюю часть блюдца, что вписывается в светоряд нашей сцены.

Подсветка для контраста

Теперь на новом слое, на самом верху, CTRL+клик по иконке слоя кольца, а на новом слое залейте это выделение белым. Не удаляя область выделения нажмите несколько раз стрелочки вниз и влево, а затем клавишу удалить Delete. Это создаст легкую подсветку.

Рисуем иконку чашки

Теперь когда блюдце закончено, начнем делать чашку! Создавайте новый слой на самом верху панели слоев, нарисуйте маленькую окружность и залейте её очень светлым серым.

Если вы не выравняли все ваши окружности, ничего страшного. Просто выберете все слои вместе, затем выберете инструмент Move Tool и на панели настроек вы увидите кнопки выравнивания.

Внутренняя сторона чашки

Создайте новый слой, и примените Select > Modify > Contract с помощью которой уменьшите область выделения на 6 пикселей. Затем залейте эту область градиентом от темно серого до светло серого. Как и с блюдцем, мы вновь создаем иллюзию света и тени.

Окружность кофе

Теперь на новом слое нарисуйте ещё одну окружность и залейте её линейным градиентом от правого верхнего края до левого нижнего. Цветами будут темно-коричневый и светло-коричневый. Как я упоминал ранее, вы можете выровнять все слои пользуясь функциями выравнивания.

Учтите что всегда лучше нарисовать новую окружность, потому что если вы будете применять contract слишком часто, круг начнет деформироваться. Это происходит потому что фотошоп для деформации отталкивается от формы пикселей, а не векторного контура.

Step 10:

Теперь применим инструмент Rounded Rectangle Tool (U)  чтобы нарисовать фигуру как показано на картинке. Учтите что я сохранил контуры, чтобы показать эту фигуру на скрине, но вам контуры не нужны, рисуйте фигуру сразу в режиме Fill Pixels.

Дополнительные тени

Далее я выбрал инструмент Burn Tool (O) и мягкой кистью затемнил ближайший к чашке край фигуры. Можете так же слегка затенить ручку по краям, но лишь слегка.

Трансформируйте слой

Примените трансформирование Edit > Transform > Perspective и трансформируйте фигуру как показано ниже.

Дополнительная тень

Теперь CTRL+клик по иконке слоя ручки, чтобы выделить пиксели и откройте Select > Modify > Expand со значением 1px. Теперь создайте слой ниже ручки и залейте его белым цветом. Потом нажмите CTRL+D чтобы снять выделение и при выбранном Move Tool нажмите стрелочку дважды в право, чтобы сдвинуть белую подсветку.

Теперь CTRL+клик по иконке слоя ручки и на новом слое залейте выделение темно серым. Затем нажмите CTRL+T чтобы трансформировать новый слой как показано ниже. И расположите этот слой под слоем с ручкой.

Теперь нажмите CTRL+SHIFT вместе и кликните и по по всем слоям чашки, чтобы выделить все пиксели. Залейте этот слой светло серым. Сдвиньте слой ниже чашки, но выше блюдца.

Поменяйте настройки невидимости и режима наложения у последнего слоя с тенью до Multiply  и 30%, затем нажмите Ctrl+T чтобы немного слой трансформировать и повернуть.

Рисуем дым

Наконец мы добавим немного дыма. Создайте новый слой и нанесите большой мягкой кистью несколько случайных мазков.

Теперь примените фильтр Filter > Distort > Wave чтобы смешать мазки в дымовые фигуры. Просто поиграйтесь с настройками пока результат вас не устроит.

Наконец, измените у слоя с дымом режим наложения на Overlay и мы закончили. Как я упоминал ранее, результат этого урока и понимание того, как выстраивать тени, пригодится вам для создания иконок и других элементов веб-дизайна.

Скачать исходники

Скачать фаил можно легко и просто, кликнув по кнопке ниже.

Скачать исходник

Надеюсь вам понравился этот урок. Подписывайтесь на наш Вконтакт, Фэисбук, Гугл+ и Твиттер. Подписывайтесь на RSS ленту. До следующий уроков.