Читать

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

03.10.2019 / Уроки

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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




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





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

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

avatar


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

С началом зимы! И с запуском обновлённого проекта! Работа по наполнению ещё идёт, поэтому если найдёте пустую страницу, знайте - скоро на ней что-то появится!) В общем, добро пожаловать в блог Михаила Марка!


01.12.2014 / Сайтовское

Наконец, дошли руки до раздела игрушек собственного «производства»! Ссылка на страницу мини-игр находится в выпадающем списке пункта «Мои работы», а также внизу (в подвале) сайта.


25.02.2016 / Сайтовское

Будущее глазами художников

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


22.09.2016 / Арт

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


14.12.2014 / Кино



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