Читать

Урок 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 Кб)

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




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





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

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

avatar


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

Найти их было очень и очень не просто - пришлось по-несколько раз пересматривать одни и те же моменты, чтобы убедиться в наличии промаха. Их гораздо больше, но я решил поделиться следующими.


16.11.2015 / Кино

Кинотрилогия «Хоббит» на некоторых из самых одарённых к рисованию фанатов подействовала самым вдохновляющим образом. По крайней мере на сайте deviantart.com лежит не мало интересных постеров...


01.04.2015 / Арт

Что ж, в прошлой части я рассказал о третьей книге. Теперь на очереди четвёртая книга "Кубок Огня". Она на проекте Поттермор пока не завершена, интерактивные главы ещё открываются, а это значит, что у нас в запасе ещё ...


01.12.2014 / Любопытное

Что ж, в прошлой части любительского обзора игры я остановился на достижении 77 уровня и обретении навыка «Полётов в непогоду» в Нордсколе. До заветного 80-го уровня осталось всего-ничего.


11.04.2016 / Игры



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