Spreadfirefox Affiliate Button

Как сделать веб-значок в Photoshop

21 сентября
2007 года

Веб-значок (web icon) всегда украшает страницу, а сделать его довольно просто. Давайте сделаем значок в форме бумажного листа. Вот такой:
Веб-значок в форме листа A4

Итак, откройте Photoshop и создайте новый документ размером 40×40 пикселей. Для начала добавьте новый слой: Ctrl + Shift + N или Layer -> New -> Layer на панели управления. На этом слое мы и будем рисовать. Выберите инструмент Rectangular Marquee Tool и выделите прямоугольную область, как показано на примере:

Выделение прямоугольной области

Обведем наш будущий листочек по контуру. На панели управления Edit — > Stroke, устанавливаете цвет границы по вкусу (предпочительно, серый). Я, в данном случае, использую цвет #acacac.

Обводка по контуру

Увеличьте масшатб изображения. Выделите уголок листочка с помощью Rectangular Marquee Tool, как показано на рисунке:

Выделяем уголок

Щелчок правой кнопкой, найдите функцию Free transform (свободная трансформация).

Free transform

Цепляйтесь мышкой за верхний правый уголок выделения и тяните его в противоположном направлении, зажав Shift. Тяните до тех пор, пока уголок не станет приемлимого размера. Он должен как бы отобразиться зеркально.

Инструмент Free transform

Перетащите уголок на предназначенное для него место — в угол. :)

Получившееся изображение

Далее выбираем инструмент «Линия» (Line Tool).

Line Tool

И рисуем прямую линию (зажмите Shift), как бы перечеркивая на уголок.

Line Tool - угол

Ну вот, уже получается что-то отдаленно напоминающее лист бумаги. :) Осталось создать тени, чтобы наш листик выглядел более натурально. Для этого копируйте вашу косую линию, сделанную с помощью Line Tool (выделите слой с линией, затем на панели управления Layer -> Dublicate Layer...) и аккуратно перемещайте новый слой вниз и чуть влево.

Делаем тень

Совместите края линий, как если бы вы накладывали друг на друга лесенку, и уменьшите прозрачность (Opacity) нижней линии до 60%.

Opacity - 60 процентов

Повторите операцию два раза, каждый раз уменьшая прозрачность на 20%. Вот что должно получиться (я увеличила изображение, чтобы вы видели, как тень постепенно сходит на нет). Похожего результата можно было бы добиться, используя градиенты, но вручную получается аккуратнее.

В результате

В принципе, значок уже выглядит неплохо. Скройте фоновый слой (Background Layer), нажав на изображение глазка. Объедините видимые слои: панель управления -> Layer -> Merge Visible. Вместо белого цвета должен остаться прозрачный фон.

Объединение слоев

Выделите внутреннюю поверхность листа любым удобным инструментом (например, «волшебной палочкой», Magic Wand)

Выделите внутреннюю поверхность листа

Выбираете на панели управления Layer -> New Fill Layer -> Gradient.... Создаете градиент от серого к прозрачному со следующими настройками:
От серого к прозрачному

Вот и всё. Если градиент получился слишком темным, просто уменьшите его прозрачность (Opacity), как показано на рисунке:

Делаем градиент прозрачным

Конечный результат:
Конечный результат

Удалите белый фоновый слой и сохраните значок с прозрачным фоном: File -> Save for Web, выберите формат изображения GIF и поставьте галочку около значения Transparency («Прозрачность»).

    Всего комментариев: 4 на запись “Как сделать веб-значок в Photoshop”

    1. Илья пишет:

      Клево. Так просто и без лишних телодвижений. Без всяких заморочек.

    2. deerstop пишет:

      Заморочки тоже, может быть, будут, но позже. :)

    3. Илья пишет:

      А как сделать значок с закруглениями и чтоб он был кругленький на всех фонах. А то эти пиксели на закруглении все портят и значок получается не круглый а угловатый((

    4. deerstop пишет:

      Я не совсем поняла, что вы имеете в виду. Что-то типа такого?

      К сожалению, от пикселей в любом случае никуда не деться, а тем более в случае с прозрачным фоном и gif-изображениями, на которых даже полутеней быть не может, только сплошной цвет. Все картинки получаются полуквадратными. :)

      Например, если вы увеличите лупу, то станет видно — она прямоугольная. :)

      Другое дело — формат png, но он поддерживается не всеми браузерами.

    Оставьте отзыв!

    Все комментарии предварительно проверяются администратором. Если ссылка на ваш сайт вызывает у меня сомнения (сайт рекламный, принадлежит не вам и т.п.), комментарий модерацию не пройдет. Пожалуйста, учтите это,прежде чем оставлять сообщение.