Читать

Урок 41. Рисуем всплывающее окно (pop-up)

14.08.2019 / Уроки

В новом уроке нарисуем такой важный элемент веб-дизайна, как всплывающее окно (pop-up). С помощью подобных окон можно выделить какую-то информацию или вынести в отдельный функционал какие-то формы, заявки и т.д.

Начнём с основы. Чаще всего, чтобы окно не потерялось на фоне сайта, его помещают на подложку с полупрозрачным тёмным фоном вокруг. Просто создаём новый слой (Shift+Ctrl+N) и заливаем его чёрным цветом, а прозрачность слою выставляем 40-50%. Затем на новом слое рисуем подложку - фигуру «Прямоугольник со скруглёнными углами»:


Урок фотошопа. Рисуем всплывающее окно (pop-up)


Если в графике вашего сайта встречается эффект тени, можно добавить её и созданной нами подложке. Кликаем дважды по слою и переходим во вкладку «Тень». Настраиваем:


Урок фотошопа. Рисуем всплывающее окно (pop-up)

Урок фотошопа. Рисуем всплывающее окно (pop-up)


У любого всплывающего окна (независимо от его предназначения и функционала) обязательно должна быть кнопка закрытия. Она может быть ненавязчивой или яркой. Выбираем второй вариант и рисуем в правом верхнем углу круг активного цвета. После чего добавляем «крестик», нарисовав его с помощью линий:


Урок фотошопа. Рисуем всплывающее окно (pop-up)


Останется разместить содержимое. Если это какое-то специальное предложение, не переусердствуйте с объёмом информации. Достаточно заинтересовать посетителя и побудить его перейти по ссылке к более подробному материалу. В качестве акцента внимания отлично подойдёт какая-нибудь органично-вписанная иллюстрация. Предположим, я хочу рассказать посетителям своего сайта о выходе моей книги:


Урок фотошопа. Рисуем всплывающее окно (pop-up)


Для ясности разместим три оставшихся элемента общей композиции: заголовок, короткое пояснение и кнопка, побуждающая к действию. Кнопку мы рисуем «Прямоугольником со скруглёнными углами» с большим радиусом скругления, а поверх пишем надпись.


Урок фотошопа. Рисуем всплывающее окно (pop-up)


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


Исходник урока — zip-архив (422 Кб)

Скачать архив




Самые первые уроки, рассчитанные для начинающих, смотрите здесь.





Просмотров: 56 / Теги: попап, pop-up, фотошоп, Всплывающее, окно, урок

Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ

Внимание! Спойлеры!
Отважному путешественнику Питеру Квиллу попадает в руки таинственный артефакт, принадлежащий могущественному и безжалостному злодею Ронану...


23.12.2014 / Кино

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


01.12.2014 / Уроки

В современном веб-дизайне много минимализма. А в графическом направлении преобладает плоский стиль. Всё реже можно увидеть объёмные кнопки, массивные рамки или переливающиеся иконки.


23.07.2015 / Уроки

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


27.03.2016 / Уроки



ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ