23.26M

Категория:

Интернет

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

3.

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

4.

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

5.

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

6.

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

7.

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

10.

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

11.

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

12.

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

13.

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

15.

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

16.

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

17.

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

18.

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

21.

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

24.

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

26.

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

27.

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

28.

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

29.

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

30.

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

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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