Рисуем стеклянные иконки

2008-02-16, Автор - Mushroom; [12427]

Вот такие вот иконки у нас получатся :-)

Урок Adobe PhotoshopУрок Adobe Photoshop


Для этого урока использовал всего-то 7-ю версию фотошопа (english) Итак, начнем. Вот что должно получиться:
Урок Adobe Photoshop
Шаг 1: Для начала создаем изображение 128*128.

Заливаем его нужный фоном или оставляем прозрачный фон.
Создаем новый слой (ctrl+shift+N).
Далее выбираем инструмент "скругленный прямоугольник" (shift+U несколько раз пока не попадем на то что нам нужно).

Урок Adobe Photoshop

Задаем скругление 10 пикселей.
Выставляем его в режим Path как показано на рисунке.


Урок Adobe Photoshop

При зажатой клавиже shift рисуем скругленный прямоугольник на слое что мы создали.
Нажимаем ctrl+enter для преобразования контура в выделение и заливаем любым цветом (на данный момент цвет не важен).
Должно получится что-такое:

Урок Adobe Photoshop

Шаг 2: Создаем тень для полученного скругленного прямоугольника.

В свойствах слоя задаем следующие параметры тени:

Урок Adobe Photoshop

Налаживаем градиент (цвет вы можете выбирать сами - поэкспереминтируйте). Я, например, использовал следующий градиент:

Урок Adobe Photoshop

Можно также наложить любую текстуру (я использовал текстуру 4*2 пикселя, где половину высоты занимает черный цвет, а другую половину прозрачные пиксели, таким образом я получил линии):

Урок Adobe Photoshop

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

Шаг 3. Создаем еще один слой на котором мы размещаем текс или рисунок.

Это может быть цветной рисунок/текст или одноцветный рисунок/текст. Я использовал нашего с вами мега-обзорного человечка:-) уж очень забавный он :-) Вот он:

Урок Adobe Photoshop

Урок Adobe Photoshop

Далее в свойствах слоя выставляем параметры тени:

Урок Adobe Photoshop

Цвет тени выбирайте исходя из цвета фона.

Шаг 4. Создание блика.

Создаем еще один слой где изпользуя инструмент "скругленный прямоугольник" (уже просто U) рисуем контур с скруглением 9 пикселей и отступами по боках от "основного тела" иконки порядка 1-2 пикселя. Нажимаем ctrl+enter для преобразования контура в выделение и заливаем его полупрозрачным градиентом (от белого до прозрачного). Должно получится как на рисунке:

Урок Adobe Photoshop

Далее используя инструмент "pen" (нажимаем "P"), отрисовуем дугу среза по середине иконки. Должно получится что похожее как на рисунке. Нажимаем ctrl+enter для преобразования контура в выделение и удаляем лишний градиент (del).

Урок Adobe Photoshop

В результате должно получится что-то похожее на это:

Урок Adobe Photoshop
Такой метод дает довольно неплохие результаты:

Урок Adobe Photoshop и тд...
Всем спасибо.

Комментарии:
Выбираем букмекера с умом...
Выбираем букмекера с умомВ последнее время большую популярность набирают прогнозы...
Vivo Apex выпустят в продажу...
Vivo Apex выпустят в продажуНекоторое время назад пользователи обсуждали крутой концепт Vivo Apex. Этот смартфон без фронтальной каме...
Plantronics выпустила беспроводную гарни...
Plantronics выпустила беспроводную гарниПредставлены беспроводные наушники Plantronics BackBeat GO 600, которые могут работать без подзарядки до ...
GeForce GTX 1180 может выйти в июне...
GeForce GTX 1180 может выйти в июнеВ сети появились слухи о том, что компания NVIDIA планирует выпустить видеокарту GeForce GTX 1180 в июне ...
HTC U12+ не стоит своих денег...
HTC U12+ не стоит своих денегБуквально некоторое время назад смартфон HTC U12+ отправили в релиз и все обсуждали какой он классный и п...
Бюджетный смартфон BQ Slim получил качес...
Бюджетный смартфон BQ Slim получил качесПредставлен 5,7-дюймовый новый бюджетный смартфон BQ Slim с разрешением 1440*720 пикселей. В основе аппар...
Поделиться в социальных сетях:


Обзор FlipTheGun. Постреляем...
Обзор FlipTheGun. ПостреляемСовременные мобильные игры направлены на два типа пользователей — первый хочет играть в короткие сессии, ...
Sony представила новую линейку телевизор...
Sony представила новую линейку телевизор17 мая в Москве состоялась презентация Sony, на которой показали новые телевизоры BRAVIA. В линейку вошли...
В Иннополисе открыта опытная зона сети н...
В Иннополисе открыта опытная зона сети н21 мая, Иннополис, Татарстан. ПАО «Ростелеком», ПАО «Таттелеком», компания Huawei и Министерство информат...
Предварительный обзор Logitech G305. Бюд...
Предварительный обзор Logitech G305. БюдИгровая периферия перестала быть просто устройством ввода — теперь каждый геймер хочет получить настоящег...
Обзор Ladybug. Раннеры снова в моде...
Обзор Ladybug. Раннеры снова в модеСтоит сказать, что еще несколько лет назад раннеры были очень популярными — буквально каждый день выходил...
Предварительный обзор Xiaomi Redmi S2. Н...
Предварительный обзор Xiaomi Redmi S2. НКитайские смартфоны перестали быть чем-то странным и отвергнутым — сейчас некоторые бренды Поднебесной вы...
Обзор Iron Throne. Netmarble вновь порад...
Обзор Iron Throne. Netmarble вновь порадКажется буквально недавно любители мобильных игр и фанаты La2 сумели с достоинством оценить появившуюся L...
Компания ASUS анонсирует старт продаж ма...
Компания ASUS анонсирует старт продаж маВ материнских платах ROG, ROG Strix, Prime и TUF Gaming для высокопроизводительных процессоров AMD Ryzen ...
«Академия безопасного вождения Ford» дл...
«Академия безопасного вождения Ford»  длЭкспертный центр «Движение без опасности» в партнерстве с компанией Ford Sollers обяъвили о старте нового...
Предварительный обзор OnePlus Bullets Wi...
Предварительный обзор OnePlus Bullets WiВместе со своим смартфоном OnePlus 6 компания продемонстрировала и совершенно новые наушники OnePlus Bull...
Обзор Candy Camera. Делаем селфи красивы...
Обзор Candy Camera. Делаем селфи красивыСкажу честно — я не большой фанат редактирования фотографий на смартфоне. Во-первых, больше люблю оригина...
Стартует крупнейший турнир по VR-версии ...
Стартует крупнейший турнир по VR-версии Наконец свершилось то, о чем мечтали миллионы фанатов «World of Tanks» - вышла VR-версия их любимой игры...

МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor