Уроки Веб и приложения Creativo 25 сентября 2008

Прозрачные обводки в стиле Vista

Сложность урока: Легкий

Наверняка, каждому из вас нравится стиль Windows Vista. В этом уроке я продемонстрирую похожий эффект. А именно создание полупрозрачных обводок у различных фигур:

Есть 2 способа.

1 способ.

Создаём новый документ.
Если вы желаете разместить свои будущие объекты на фоне в стиле Vista, то посмотрите этот урок.

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

Дублируем этот слой.
Переходим на верхний прямоугольник, нажимаем Ctrl+T. Теперь, зажав Shift, берём угловую точку и уменьшаем фигуру. Передвигаем её в центр нижней фигуры. Подровняйте, чтобы всё края были равны.

Берём слой с нижним прямоугольником, уменьшаем прозрачность (opasity) по вашему усмотрению.

Теперь выбираем инструмент «перо» , рисуем вот так:

Далее выбираем слой с этой новой фигурой, в меню выбираем Layer – Rasterize – Shape (слой – растрировать – фигуру)
Теперь Ctrl+клик по слою с нижним квадратом, Ctrl+Shift+I, выбираем слой с треугольником, Delete. Уменьшаем прозрачность. Примерно так:

Всё! Готово! Теперь вы можете добавлять текст или различные картинки.

Способ 2:

Более простой.
Создаём фигуру (к примеру прямоугольник), далее нажмите внизу палитры слоёв значок Add Layer Style (Добавить стиль слоя) , добавляем стиль Stroke (Обводка) любого цвета, уменьшаем прозрачность.

Растрируйте фигуру. Теперь создаём слой над фигурой, ПКМ рядом со слоем и выбираем Merge Down (Объединить с нижним)

Еще добавьте тень при помощи Стиля Слоя Drop Shadow!

Готово!

Источник: creativo.one

71 тыс. 43
Печать Жалоба

Комментарии 43

Спасибо! Испробовал два варианта. Жаль, что на обводке нельзя регулировать радиус угла.

Спасибо за урок)

Спасибо за замечательный урок!

Красивы урок!Спасибо!

Урок понравился,Спасибо!!!!

Спасибо за урок!

Спасибо

Прозрачные обводки в стиле Vista. Спасибо.

Хороший урок.

Спасибо за урок! Назвала "В ожидании весны"

спасибо, урок понравился

идея хорошая но работу не выложу,огромная получилась 1000*1000

Спасибо просто, но красиво!

Спасибо за урок!

Урок хороший. Жалко, что не говорится как сделать Aero обводку. Но я ее сам смог сделать

Спасибо вам, Universe.photoshop, за идею!

Спасибо! Первый вариант понравился больше)

Прелесть!!! Спасибо!

Спасибо! Впечатляет, просто и со вкусом)

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее