12 мая 2014 в 11:11

Дизайн сайта в Sketch.app. Часть 2.2: финальный макет tutorial

intro-img-3

Последняя часть по работе с сайтом в Скетче.

Для трех основных категорий наушников сделаем небольшие описания и поставим фотки (Фликр и тут нам поможет).
Чтобы растянуть заглушки на всю ширину сетки, сохранив при этом нулевое расстояние между ними, выделите все три и просто растяните, как обычно в любом граф. редакторе. Работает тоже и растягивание с зажатым Option — блок расширяется сразу в обе стороны.

категории

Поставим блоки по сетке. Второй и третий блоки у нас немного пересекаются (на картинке выше), поэтому немного подправим расстояние с помощью плагина Space Horizontal. Двигаем на 0 пикселей, т.е. «склеиваем» блоки.

расстояние

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

фото категорий

Заголовки категорий покрасим в белый и попробуем сделать плашку на все случаи, чтобы текст всегда оставался читаем. Но для начала подвинем каждый заголовок к краю соответствующего фото: выбираем текст и фотографию и жмем справа вверху «Align Left».

выровнять влево

Затем выделим все три заголовка и подвинем «на два шифта» вправо — сделаем отступ т.е.

сдвиг вправо

Выделяем фото категории и рисуем поверх прямоугольник. Красим его градиентом от черного к черному (!), но с разной прозрачностью.

градиент поверх категорий

И заменим шрифт в названиях. Скетч показывает текущие использованные в панели текстовых стилей.

последние шрифты

Торговые марки


Для примера просто найдем в интернете 6 «наушных» брендов. По возможности ищем черно-белые логотипы, но и цветные подправим, если что.

логотипы

«Сенхейзер» вот цветной. Но у нас есть примитивные инструменты редактирования картинок (в правой панели свойств). Ставим галочку в «Color Adjust». Открываются три ползунка, которыми мы и сделаем из цветной картинки черно-белую.

цвет в чб до



цвет в чб после

«Как правильно подобрать»


Небольшой абзац о том, на что ориентироваться при выборе. Для начала поменяем шрифт заголовка на наш PT Serif и растянем до нужной ширины. Поищем в Википедии что-то более-менее подходящее.
Если тянуть текстовый блок за нижний край, он будет увеличиваться вниз. Если за середину — и вверх и вниз. Если за верхний край — вверх.

размеры текстового блока

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

вставить с заменой

Выносим названия пунктов на отдельные слои (вырезать/вставить). Сделаем из них подзаголовки.

пункты на отдельных слоях



подзаголовки

Текста получается многовато, постараемся максимально сократить все, что сможем.

многовато текста до



многовато текста после

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

Фильтр


Определимся, сколько будет занимать места. Изменим стиль заголовка.

ширина фильтра

Потом — стили для названий полей и кнопки.

лейблы

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

стиль инпута

Задать радиус угла можно в панели свойств (справа) или с помощью плагина «Set Radius»
К параметрам цены хорошо бы добавить значок рубля. Используем шрифт «ALS Rubl».

значок рубля

Ползунок диапазона


У нас есть линия с обводкой по центру. Нам остается закруглить ее и (возможно) подкрасить покрасивше. Параметры обводки — все там же справа.

обводка

У треугольников скруглим края. Если выбрать точку в фигуре, на панельке сверху появятся параметры привязки точки к пикселям (к целому пикселю, полупикселю или вообще без привязки). Там же можем настроить скругление только у этой выбранной точки.

скругление у точки

Можем сделать так со всеми точками треугольника. При этом если будем его растягивать, то радиус в точках не увеличится с увеличением размера всей фигуры.

радиус не меняется

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

диапазон

Выпадающие списки


Для начала скопируем стиль у полей ввода, но вместо внутренней тени сделаем внешнюю — список не «вдавленный», а «выпуклый». И сохраняем стиль.

стиль дропдауна

Рисуем чекбокс — стиль уже есть, правим только размер.

чекбокс

Осталась кнопка


Сначала подгоняем размер к сетке. И делаем на всю ширину фильтра, но с учетом отступов по 30пкс.

кнопка

«Подобрать» ставим по центру и красим в белый (ну, пусть пока белый). Перед этим не забудьте убрать у него стиль, иначе перекрасите все текстовые объекты.

стиль надписи

И подгоняем высоту подложки:

высота подложки

Нужно определиться с цветами. У нас пока все черно-белое, но зато есть фотографии. Сохраним верхнюю часть страницы в картинку на рабочий стол. Затем откроем картинку в приложении Spectrum — эта штука поможет нам в подборе цветов (Спектрум не обязателен, подойдет и Кулер, например, или даже системная панель цветов).

цвета из картинки

Дальше выберем 3-4 цвета и сохраним в картинку.

цвета

цвета в картинку

Затем в системной цветовой панели в Скетче откроем картинку

цвета в панели

И, собственно, все — у нас есть палитра для дальнейшего использования.

готовая палитра

Покрасим фильтр

цветной фильтр

Текстовый блок про «Как подобрать» получился скучноватым, надо бы подать информацию поживее. Попробуем добавить иконок и расставить абзацы «плиткой». Для примера можно взять любые иконки, какие под руку попадутся.
Так чуть повеселее:

иконки параметров

Футер


Собственно, тут все просто: делаем ссылки на разделы и копируем поиск из шапки.
Думаю, стоит добавить подчеркивание в ссылки. Тонкое подчеркивание придется делать вручную: рисуем линию, заливаем цветом с непрозрачностью примерно 50% и сохраняем стиль.

подчеркивание

Потом дублируем линию для каждой ссылки:

дублируем линию

Очень советую в процессе внятно называть слои. Хотя бы самые важные. Встроенный в панель слоев поиск (Cmd+F) потом может очень пригодиться, если нужно что-то поправить в нескольких объектах одновременно. Например, сдвинуть вниз подчеркивания ссылок в футере. В поиске ищем наши подчеркивания, выделяем все сразу и двигаем на пару пикселей вниз.

сдвиг подчеркивания

Еще нужно привести длину линий в соответствие со ссылками. Используем плагин «Equalize Width...». Выбираем слово, линию и в зависимости от того, что длинее, используем «Equalize Width Down» или «Equalize Width Up» — т.е. или уменьшаем, или увеличиваем длину подчеркиваний.

длина линий

С футером все.

готовый футер

Теперь добавим подчеркивание остальным ссылкам на макете.

подчеркивание везде

Заполним поля в фильтре:

поля в фильтре

И все, макет готов.
Website-in-sketch.sketch

индекс

Эпилог


Пока я рожал статью, вышел уже 3й Скетч. И если старый справлялся вполне неплохо, то новый нужно прям бежать и брать. В связке с плагинами, которые уже как грибы, это пока самый мощный инструмент на Маке для дизайна интерфейсов (если учитывать, что Фаервокрс давно уже того).
Всем трудовых успехов и до новых встреч.

Предыдущие посты по теме:
Дизайн сайта в Sketch.app (Mac OS). Часть 1: плагины и прототип
Дизайн сайта в Sketch.app. Часть 2.1: наводим красоту
Евгений Резник @reznik_e
карма
38,0
рейтинг 0,0
Веб-дизайнер
Похожие публикации

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

  • 0
    Как по мне, было бы неплохо добавить ссылки на предыдущие посты по этой теме.
    • +2
      Обновил, спасибо
  • 0
    А как у вас со скоростью работы в скетче? У меня в основном проблемы появляются при навигации по документу фотошоповскими шорткатами (alt+scroll, space+drag). И каждый раз ведет себя по-разному.
    • 0
      Таскаю с пробелом. Еще на планшете для Скетча очень «дальнобойный» скролл настроен — удобно парой движений по всей странице проехать. Если несколько холстов («артбоардов» т.е.), то для навигации между ними удобно уменьшить все (View->Center Canvas), выделить нужный холст и приблизить на 100% (View->Actual Size или View->Center Selection).
  • 0
    Давно ищу замену Photoshop на MAC
    единственная проблема которая осталась это адекватное открытие PSD, к сожалению пока не нашел чем его открыть что б были и слои и не плыло ничего
    • 0
      А вам псд открывать зачем?
      • 0
        По большей части занимаюсь версткой, потому приходиться работать с PSD
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Скетч — плохая альтернатива Фотошопу, не умеет картинки редактировать. Он все-таки для дизайна интерфейсов. Ну, вектор еще рисовать можно.
      • 0
        В рамках дизайна интерфейсов вам часто и по долгу приходиться редактировать изображения?
        • 0
          Нет, мелочь иногда. А вопрос к чему?
          • 0
            К тому, что статьи у вас про дизайн интерфейсов. И в рамках этой области скетч хорошая альтернатива фотошопу.
  • 0
    В первой статье вы писали, что используете Скетч в связке с Пиксельматором. Скажите, а почему вы не делаете макеты сразу в нем? В последней версии Пиксельматора появились относительно хорошие инструменты для работы с вектором.
    • 0
      Я сайты рисую, а Пиксельматор слабоват для такого: нет стилей, страниц, холстов, объектов. Ничего, в общем, полезного для веб-дизайнера :-)
  • 0
    можете выложить куда-нибудь ваш макет поиграться?(как раз изучаю sketch)
  • 0
    о класс, спасибо
  • 0
    подскажите, для скетча есть нечто похожее на CSSHat или какой-то другой способ получить css?
    • 0
      вроде нашел в меню Copy Style и Copy CSS Attributes
      • 0
        да, через меню. вот эта штука когда-то должна запуститься с поддержкой Скетча. еще есть плагин для экспорта в html, но сам не проверял. под него вроде как-то хитро надо слои организовать.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.