Как создать блестящую супер-иконку в стиле Веб 2.0
Веб 2.0 стайл с космическими скоростями завоевывает Интернет. Пусть Ваш сайт не отстает! Кроме уже опбликованных веб 2.0 уроков, представляем Вашему вниманию новый!
![]()
Приблизительное время выполнения: 5 минут
Создайте новый документ 600х300 с белым фоном. Инструментом Ellipse нарисуйте круг на новом слое и назовите его «иконка фон». Примените к слою следующие стили:
![]()
![]()
![]()
![]()
![]()
Вот, что у Вас примерно должно получиться:
![]()
Создайте новый слой и выделите на нем похожую область:
![]()
Заполните ее белым цветом и примените Filter > Blur > Gaussian Blur:
![]()
Установите непрозрачность этого слоя до 50%
![]()
Создайте слой, выберите слой «иконка_фон» и выделите на нем область как на рисунке ниже. Залейте ее белым цветом:
![]()
Создайте еще один слой и выделите на нем область по форме, как видно на рисунке ниже. Заполните ее белым цветом и уменьшите непрозрачность слоя до 25%
![]()
Теперь добавьте любую иконку и текст на свой вкус
![]()
Сейчас давайте создадим простое отражение. Скопируйте все слои, кроме фонового. Выделите все эти копии в панели слоев и нажмите CTRL+E, чтобы слить их в один. Отразите слой вертикально Edit > Transform > Flip Vertical. Расположите получившуюся картинку под имевшейся иконкой. Создайте на этом слое маску и залейте ее градиентом, чтобы убрать часть отражения
![]()
Готово!
Вот еще пара примеров:
![]()
![]()
Источник: Design a Web 2.0 Style Icon
Смотрите также:

Урок отличный, но не для начинающих.
«Заполните ее белым цветом и примените Filter > Blur > Gaussian Blur:»
а правельней:
«Заполните ее белым цветом, снять виделение(Ctr+D) и примените Filter > Blur > Gaussian Blur:»
Сентябрь 25th, 2007
красивая, но уж не супер
Сентябрь 27th, 2007
Кстати красивая и не однообразная иконка как обычно ее делают…
Только вот возможноли выложить патерн для полосок?.. ато чет никак немогу угадать размер, то тонкая и сильно плотно, то толстые получаются…
Октябрь 3rd, 2007
отличный урок большое СпОсИбО…
Октябрь 8th, 2007
может кто выложит патерн правильный для этой иконки?
Октябрь 8th, 2007
для патерна бери холст размером 5×5…покрайнеймерее я такой брал
Октябрь 8th, 2007
IgR0]{_444 спасибо, попробую… иногда просто интересно глянуть на используемый вариант
Октябрь 11th, 2007
Отлично, то что надо!!!
Октябрь 22nd, 2007
Урок хороший, но можно ли рассказать более подробно как делается эффект отражения? Давно искал его описание но так и не нашел и тут он тоже рассказал весьма прозрачно. Спасибо
Декабрь 13th, 2007
RainyWill
сливаешь нужный объект, копируешь этот слой, потом вертикально отзеркалюешь (Edit-Transform-Flip Vertical), далее накладываешь маску (в меню Layer внизу кнопочка Add Layer mask), берешь градиентную заливку от черного к белому и заливаешь как тебе понравится, там где черное бeдет прозрачность, а белое, там будет объект.
Декабрь 13th, 2007
Спасибо большое
Декабрь 13th, 2007
Объясните плз нубу как сделать этот паттерн
Февраль 2nd, 2008
Создаешь документ с размерами 30px на 30px, и разрешением 72 pixels/inch в установках Бекграунд указуешь Transparent(прозрачный) далее берешь Карандаш(не кисть) и зарисовуешь по диагонале черным цветом квадратики 3 на 3 писеля, далее идешь в Edit-Define Pattern, обзываешь как он будет зваться, желательно по английски и кликаешь Ок, паттерн готов.
Февраль 2nd, 2008
а как потом выбрать свой паттерн?
Февраль 22nd, 2008
http://savepic.ru/162257.png
спасибо за урок
Февраль 25th, 2008
зачет!
Февраль 25th, 2008
Отражается прикольно — HЕГЬ
Март 24th, 2008
Исходник линий можно скачать [url=http://i007.radikal.ru/0806/00/098886bd892e.png]сдесь[url] сам сделал. Может немного и кривоватый но у меня норм отображается.
Июнь 12th, 2008
Блин. Вообщем вот ссылка:
http://i007.radikal.ru/0806/00/098886bd892e.png
Дальше откроете в фотошопе, зайдете в edit и выберите параметр Define Pattern ну и дальше все ясно, Аниматор обьяснял.
Июнь 12th, 2008
РЕБЯТ, а как выделить область в форме банана именно, чтобы ровно и красиво было
Август 28th, 2008
найти в гугле картинку банана на белом фоне, открыть в шопе, взять Magic Wand Tool кликнуть по белому фону и нажать Ctrl+I
Август 28th, 2008
ой, прошу прощения в конце надо Ctrl+Shift+I а не Ctrl+I
Август 28th, 2008
Спасибо огромное ) ща попробую
Август 28th, 2008
Че о кривой способ
нчие не получилось, инструментом каким то надо ето сделать
HELP!!!
Август 28th, 2008
чем он кривой?
Август 28th, 2008
вот тебе Shape банана сделанный по как ты выразился кривому способу-
http://upload.com.ua/get/900415756
Август 28th, 2008
а слева формой какой надо заливать и КАК чтобы не залить все остальное ищображения!?
Август 28th, 2008
Вопрос — «РЕБЯТ, а как выделить область в форме банана именно, чтобы ровно и красиво было»
Ответ — Берем эллиптическое выделение и делаем круг как и наш, потом перетаскиваем их как бы один на один зажимаем ALT и делаем еще один круг, но так чтоб его верхние края выходили за края предыдущего круга,а нижние составляли форму «банана» с нижними краями предыдущего, отпускаем кнопку мыши в вуаля … готово
Март 9th, 2009