Читать

Урок 42. Рисуем информер для публикаций

03.10.2019 / Уроки

В этом уроке нарисуем блок (или информер) вывода материалов определённого раздела сайта на главную страницу. К примеру, у нас есть внутренний раздел Статей и мы хотим вывести на главную несколько последних публикаций.

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


Урок фотошопа. Рисуем информер для публикаций


Копируем в наш рабочий файл изображение новости и жмём комбинацию клавиш Ctrl+Alt+G, чтобы наше изображение приняло форму ранее нарисованного прямоугольника:


Урок фотошопа. Рисуем информер для публикаций


Создаём новый слой (Shift+Ctrl+N) и рисуем прямоугольник чёрного цвета. Создаём маску для этого прямоугольника и градиентом, уходящим в прозрачность, проводим сверху вниз:


Урок фотошопа. Рисуем информер для публикаций


Снова создаём обтравочную маску (Ctrl+Alt+G) и уменьшаем прозрачность слоя на 60%.


Урок фотошопа. Рисуем информер для публикаций


Осталось добавить информацию поверх фотографии. В данном случае это наименование категории (размещённое на цветную плашку - прямоугольник со скруглёнными углами) и заголовок публикации. На этом оформление главной публикации у нас готово!


Урок фотошопа. Рисуем информер для публикаций


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


Урок фотошопа. Рисуем информер для публикаций


Расставляем изображения и переходим к тексту. Заголовки здесь должны быть меньше, чем у главной публикации, и располагаться они будут под изображением вместе с категорией:


Урок фотошопа. Рисуем информер для публикаций


У нас осталось место справа от главной публикации. Можно было бы и туда разместить второстепенную публикацию, но я решил сделать наш информер более разнообразным, поэтому в свободном пространстве мы расположим только заголовки публикаций без фотографий и категорий. А разделим мы их однопиксельными линиями:


Урок фотошопа. Рисуем информер для публикаций


Прилагаю исходник урока в формате psd — zip-архив (1,25 Мб)

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




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





Просмотров: 425 / Теги: фотошоп, веб, дизайн, урок

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

avatar


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

Внимание! Спойлеры!
История о сироте, который попал в волшебную Нетландию, где его поджидали опасные приключения. Там он понял, что его судьба — стать героем, который...


22.01.2016 / Отзывы

Внимание! Спойлеры!
Юпитер Джонс родилась под ночным небом, и все знаки предсказывали, что девочке предстоят великие свершения. Юпитер выросла и...


09.05.2015 / Отзывы

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


20.01.2015 / Игры

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


01.04.2015 / Арт



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