Дизайн сайта в Sketch.app. Часть 2.1: наводим красоту

в 12:28, , рубрики: mac os x, osx, sketchapp, веб-дизайн, уроки, метки: , , ,

intro-img-2

Описание процесса у меня очень длинным получается, поэтому двумя частями не ограничимся.
Итак, продолжаем с нашими наушниками. Для начала давайте разберемся, как в Скетче делать сетку...

Модульная сетка

Настроить сетку можно из двух мест. Отображение — из настроек программы:

параметры сетки

Размеры и количество колонок/ячеек — из меню на панели инструментов:

меню сетки

Давайте возьмем 12 колонок с шириной колонки 60пкс и расстоянием 30пкс между колонками. Основной текст будем делать размером 16пкс, значит базовая линия — 24пкс («полуторный» интервал). Но горизонтальные направляющие сделаем вдвое меньше (12пкс) — так мне удобнее.

параметры колонок

меню

Основной шрифт оставим пока по умолчанию — пусть Гельветика. Для заголовков возьмем PT Serif. Выравниваем меню и пишем название нашего магазина. Ну, пусть «Наушники» и будет. Для выравнивания слоев идем в правый верхний угол:

выравнивание

В меню выравниваем по сетке крайние правую и левую ссылки. А для равномерного распределения пунктов между ними есть команда Arrange->Distribute Objects->Horizontally.

выравнивание

Меню получилось слишком широким (расстояния между пунктами больше, чем от меню до поиска), поэтому я немного подвинул правую ссылку и еще раз выровнял все:
до

меню до

после

меню после

Поле поиска делаем высотой 24пкс и «вдавленным» в подложку.

поиск по высоте

(Красим в светло-серый и добавляем две внутренние тени. В Скетче можно добавлять сколько угодно теней внутри и снаружи, так же как и обводок или заливок.)

поиск стиль

Курсивная Гельветика выглядит не особо красивой, поменяем на PT Sans, например.
до

поиск до

после

поиск после

Стиль сохраним на будущее — у нас еще в фильтре поля есть.

панель стилей закрытая

панель стилей открытая

панель стилей добавлено

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

стиль текста

стиль текста новый

Потом выбираем остальные пункты меню и к каждому привязываем стиль.

слайды

Бесплатные картинки можно найти на Фликре. Для этого в «advanced search» выберите параметр «с лицензией Creative Commons»

поиск фликр

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

кнопка «создать маску»

Теперь нужно разобраться с текстом на слайдах. Попробуем просто сделать его белым.

белый текст слайдов

Выглядит хорошо, но есть проблема: если на слайде будет светлая фотография, текст опять будет нечитаем. Поэтому возвращаем тексту черный цвет и делаем белую подложку, чтоб наверняка. И давайте заодно заменим уже BLOKK на PT Sans. И попутно не забываем про сетку.

черный текст на подложке

Отступ по 20 пкс от края подложки — как-то многовато, сделаем по 15. Внимание: сверху и снизу считаем отступы от высоты строчных букв (x-height), а выносные элементы не учитываем. Это для того, чтобы строчка текста была сбалансирована по центру подложки.

отступы по 15пкс

У Скетча есть неплохой измеритель расстояний, но с текстовыми объектами он не очень хорошо работает — у текста всегда есть внутренний паддинг. (Чтобы быстро менять размеры объектов, используйте Cmd+→ / Cmd+← (ширина) или Cmd+↓ / Cmd+↑. Если параллельно держать Shift, размер будет увеличиваться на 10пкс.)

создание отступов

Теперь делаем то же самое с описанием слайда и ценником

описание и цена с подложкой

Если вам неудобно каждый раз в несколько щелчков пробираться сквозь группы, чтобы выбрать нужный слой, зажимайте Cmd и щелкайте сразу по объекту. Второй вариант — выбрать «кликать насквозь»

«кликать насквозь»

Рисуем листалки. Сделаем немного полегче, чем на прототипе. Оставим только стрелки, но сделаем их достаточно большими, чтобы не приходилось целиться. Для начала рисуем косые линии, потом делаем им скругленную обводку. Дальше группируем и называем «<>», например.

листалки

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

точки

Давайте максимально увеличим высоту у слайдов, чтобы эффекней выглядели.

высокий слайд

Пока все. В следующей главе займемся контентной частью.

Оригинал трехнедельной давности

Автор: reznik_e

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js