Дизайн сайтов. Занятие 6 презентация

Макет в ФШ

Как может выглядеть то, что хотят заказчики…
(разбираем пример готового макета)

Сетка bootstrap
При создании PSD-шаблонов сайтов не обойтись без модульной сетки, состоящей из специально расставленных направляющих.

Элементы композиции расположены не хаотично на «полотне», а выравниваются, ориентируясь на вертикальные линии.
Это придает ритм композиции, аккуратность внешнего вида, облегчает восприятие информации

Полезный инструмент - файл, в котором уже «нарисованы» колонки, которые помогут выровнять объекты на странице
bootstrap сетка psd

https://webdesign-master.ru/blog/tools/2016-11-26-bootstrap-psd.html
Один из сайтов, где можно скачать сетку для больших мониторов, дизайна для планшетов и мобильников

Комплекты файлов с сеткой bootstrap

Просмотр - Закрепить направляющие

Изображение – Размер изображения
Сначала для сайтов придумывается вид на самом большом экране (шириной документа 1920 пикс)

Инструмент «Рамка» поможет изменить высоту холста

Инструмент «Заливка» поможет изменить цвет объекта на выбранном слое
Alt Backspace

Задание: «Заливка».
Цвет переднего плана: #fe8a97
Alt Backspace

Инструмент «Стиль слоя»
(fx)

Задание: стиль слоя «Наложение цвета»
Alt Backspace

Инструмент «Простые фигуры»
поможет создать прямоугольники…☺

Задание: «Прямоугольник».
Высота 100 пикс. Цвет: #fe5e70

Задание на закрепление
Прямоугольник высотой 500 пикс., цвет #fe8a97

В моде градиентные заливки…

Стиль слоя
«Наложение градиента»

Стиль слоя
«Наложение градиента». Применить к слою прямоугольником 500пикс

Редактирование градиента

Тексты

Напечатать текст, предварительно сделать ему ограничительную рамку (до границ безопасной области). Внутри рамки выровнять текст поможет палитра «Абзац»

Выравнивание слоев

Выделить 2 слоя и в панели свойств найти кнопки выравнивания

https://demo.onepagelove.com/fullsingle/flyleaf-layout/
http://vyasanie.webflow.io/
Примеры образцов

Текстовые блоки размещаем в макете сайта/баннера не хаотично,
а ориентируясь на линии сетки

Трекинг –расстояние между знаками – поможет сделать более интересные варианты выделения заголовков
Задание: текстовый блок шириной 6 колонок, 20 кегль, с трекингом 200

Задание: несколько текстовых блоков шириной 6 колонок, ориентируясь на параметры шрифтов с образца
https://demos.onepagelove.com/fullsingle/flyleaf/

Корректное размещение изображения

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

Прямоугольник 458х510 встал куда надо по замыслу
Значит, здесь нужно фото, обрезанное до такого размера

Переименовать слой в «габариты фото в обложке»

Обтравочная маска облегчает встраивание фото, которое не вылезет за заданные габариты

Задание: поместить в композицию фото с фотостока

Убедиться, что слой с фото выше слоя с габаритным контуром.
Выбрать слой с фото и с помощью контекстного меню выбрать «создать обтравочную маску»

Уменьшить слой с фото (удерживая Shift, чтобы сохранились пропорции)

Мои любимые фотостоки
https://ru.pngtree.com/

Мои любимые фотостоки
https://pixabay.com/

Мои любимые фотостоки
https://www.pexels.com/

Мои любимые фотостоки
https://unsplash.com/

Платные фотостоки (если искали несколько дней бесплатное фото, но не нашли… А на платном как раз то, что хотите...
https://ru.depositphotos.com/

Платные фотостоки (если искали несколько дней бесплатное фото, но не нашли… А на платном как раз то, что хотелось бы...
https://www.shutterstock.com

Когда можно использовать платные изображения бесплатно и как их найти без водяных знаков

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

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

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

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

Как сохранить слои как отдельные изображения, чтобы отдать верстальщику

тримминг в фотошоп

Как сохранить слои как отдельные изображения, чтобы отдать верстальщику
Файл - Экспорт - Слои как файлы

Как сохранить слои как отдельные изображения, чтобы отдать верстальщику
При экспорте выбрать формат с прозрачным фоном - PNG24

Как сохранить слои как отдельные изображения, чтобы отдать верстальщику
Удобнее и быстрее выбрать нужный слой правой кнопкой и из контекстного меню - экспорт слоя в PNG

Вертикальный ритм

Вспомогательный «Измерительный кирпич»

Кнопки – частый элемент макетов

Фон для кнопки –прямоугольник со скругленными углами. Цвет f8354f

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

В моде легкие тени, придающие трехмерность...

Габаритному прямоугольнику можно добавить легкую тень (через стиль слоя)

На повторение:
К слою с фото применить стиль «наложение градиента»

Переименовать слои у готовой секции

Группировка слоев – важный навык при создании цивилизованного макета

Сгруппировать слои обложки

Слои-Сгруппировать (Ctrl+G)
Применить для элементов кнопки

Круглая обтравочная маска +цветокорректирующий слой ч/б
https://demos.onepagelove.com/fullsingle/flyleaf/

Фото+ обтравочная маска (в форме круга) +цветокорректирующий слой над фото