Создание Фреш Веб-сервиса: дизайн сайта SaaS услуг

В этом уроке при помощи Adobe Photoshop мы создадим аккуратный свежий макет, который сможет пригодиться в любом проекте, связанном с SaaS веб-приложениями. Здесь мы рассмотрим некоторые элементы фирменного стиля, такие как ленточки, фирменные кнопки, стикеры, а также вспомним основы, включая фигуры, маски, типографику и так далее.

1 Шаг

Начнем с создания нового Photoshop документа, выполнив File > New.

Задайте ширину холста равной 1100px, высоту 1300px, разрешение задайте равным 72dpi, а цвет фона пусть будет белым.

2 Шаг

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

Выполните Select > New Guide…

Для первой направляющей выставите Orientation равной Vertical, а Position — 70px.

Для второй направляющей (выносится также посредством View > New Guide) Position задайте равным 1030px, а Orientation оставьте равной Vertical.

В итоге у нас должно получиться выделенное пространство шириной 960 px как раз под содержимое страницы.

3 Шаг

Давайте зададим странице определенный фон. Переключитесь на Paint Bucket Tool (G) и задайте основной цвет равным #EBEBEB. Затем кликните курсором Paint Bucket Tool в любое место холста, и фоновый слой окрасится в только что выбранный цвет.

4 Шаг

Теперь добавим небольшой прямоугольник с градиентом в верхнюю часть страницы. Это придаст фону немного объема.

Переключитесь на Rectangle Tool (U) и растяните широкий прямоугольник порядка 160px в высоту, начинающийся от левого края холста и проходящий по ширине всего документа.

Затем смените заливку прямоугольника на #EBEBEB (цвет фона) и примените к его слою следующий стиль:

5 Шаг

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

Переключитесь на Horizontal Type (T) и нанесите какой-нибудь текст (это может быть название вашего сайта). Задайте тексту следующие параметры:

  • Font Family: Aller (download here)
  • Size: 40 px
  • Style: Bold
  • Tracking: -25
  • Anti-aliasing: Sharp
  • Color: #ACACAC

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

Затем примените к тексту следующие стили:

6 Шаг

Теперь давайте создадим ссылки для навигации. Переключитесь на Horizontal Type Tool (T) и нанесите на холст текст, как показано ниже (хотя вы можете называть ссылки на свое усмотрение).

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

  • Font Family: Helvetica Neue
  • Size: 13 px
  • Style: Bold
  • Tracking: -25
  • Anti-aliasing: Smooth
  • Color: #555555

Этот слой с ссылками поместите на расстоянии в 60px от верхнего края холста, касаясь правой направляющей.

Теперь нам нужно сделать ссылку “Home” активной. Переключитесь на инструмент Rounded Rectangle Tool (U) и задайте радиус скругления углов равным 6px.

Растяните маленький прямоугольник поверх ссылки “Home” размером в 60x25px. Затем перенесите этот слой под слой с ссылками на палитре Layers.

Теперь, при помощи Horizontal Type Tool (T) выделите слово “Home” и смените его цвет на черный (#000000). В итоге вы должны получить вот что:

7 Шаг

Далее нарисуем непосредственно контейнер страницы. Переключитесь на Rounded Rectangle Tool (U) и задайте радиус скругления углов равным 10px.

На расстоянии в 135px от верхнего края нашего холста растяните большой прямоугольник высотой в 1065px и шириной от левой и до правой направляющей (возможно, вам захочется увеличить масштаб для этого).

Смените цвет прямоугольника на #F8F9F8 и примените следующие стили для слоя:

Чтобы отсечь нижнюю закругленную часть нашего контейнера, нужно иметь возможность выделения частей слоя. Для этого, находясь на слое с контейнером для страницы, выполните Layer > Rasterize > Layer.

Далее на палитре Layers кликните по кнопке создания маски “Add Mask” для добавления векторной маски к слою.

Далее переключитесь на инструмент Rectangle Tool (U) и растяните прямоугольник, начинающийся из-за левого края контейнера, немного выходящий за его правый край, примерно на 30px выше верхнего его края и заканчивающийся как раз перед тем местом, где прямая вертикальная линия контейнера начинает переходить в скругленные углы внизу экрана. Для получения более точных результатов можно в несколько раз увеличить масштаб.

Конечный результат: верхушка со скругленными углами и острые углы в нижней части страницы.

8 Шаг

Я предлагаю двигаться от верхней части нашей страницы, начав с загрузки скриншота нашего приложения, выполнив File > Place… Измените размеры файла до 340x230px и поместите его на расстоянии 65px от левой части контейнера страницы и 50px от верхней ее части.

Далее нам нужно добавить отражение к скриншоту, чтобы привлечь к нему внимание посетителя. Выберите слой со скриншотом и выполните Layer > Duplicate Layer… Назовите этот слой “Screenshot Reflection” и нажмите Ok.

Теперь нам нужно зеркально отразить этот дубль по вертикали. Выполните Edit > Transform > Flip Vertical, затем перенесите этот слой прямо под оригинал скриншота.

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

Переключитесь на Gradient Tool (G) и выберите градиент из предустановленных настроек, идущий от черного к белому. И растяните этот градиент по маске сверху вниз на расстояние порядка 50px на отраженном скриншоте.

В конечном счете понизьте Opacity слоя до 30%.

9 Шаг

Здесь мы добавим беглое введение в суть предлагаемого нами сервиса. Переключитесь на Horizontal Type Tool (T) и введите небольшой заголовок. Разместите этот слой на расстоянии 40px правее от скриншота и 60px от верхнего края контейнера страницы. Задайте такие параметры для шрифта:

  • Font Family: Helvetica Neue
  • Size: 30 px
  • Style: Regular
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #363636

Далее под заголовком добавьте еще один текстовый блок и введите какое-нибудь текстовое описание сервиса. Разместите его на расстоянии в 30px от заголовка и задайте следующие параметры для шрифта:

  • Font Family: Helvetica Neue
  • Size: 13 px
  • Style: Regular
  • Leading: 22 px
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #363636

10 Шаг

Под текстом с описанием нам нужно создать глянцевую кнопку. Переключитесь на Rounded Rectangle Tool (U) и растяните прямоугольник размерами 135x30px. Не беспокойтесь сейчас о цвете заливки — на данном этапе это не критично.

Поместите кнопку на расстоянии в 35px ниже блока с описанием и примените к ней следующие стили:

Теперь нам нужно нарисовать небольшую иконку для кнопки. Выберите Ellipse Tool (U) и создайте окружность диаметром 20px поверх кнопки. Задайте ей черный цвет заливки и поместите ее на расстоянии 5px от верхнего края кнопки и на 8px от левого.

Примените к слою с кружком следующий стиль:

Затем спустите Opacity кружка до 25%. После этого переключитесь на Custom Shape Tool (U) и поместите в его середину небольшую фигурку (я выбрал обычную стрелку для этой цели).

Ну и, в конечном счете, давайте нанесем на кнопку надпись. Переключитесь на Horizontal Type (T) и что-нибудь напишите с отступом в 10px от нашей иконки. Я использовал следующие параметры для шрифта:

  • Font Family: Helvetica Neue
  • Size: 13 px
  • Style: Bold
  • Tracking: -15
  • Anti-aliasing: Crisp
  • Color: #FFFFFF

В качестве завершающего штриха, примените к тексту стиль Drop Shadow:

11 Шаг

Добавление небольшого пояснения напротив кнопки иногда может соблазнить пользователя кликнуть по ней.

Переключитесь на Horizontal Type (T) и нанесите немного текста на расстоянии 15px справа от кнопки. Задайте тексту следующие настройки:

  • Font Family: Helvetica Neue
  • Size: 11 p
  • Style: Regular
  • Anti-aliasing: Crisp
  • Color: #636363

12 Шаг

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

Переключитесь на Rectangle Tool (U) и нанесите на холст прямоугольник от левой направляющей и до правой в 305px высотой.

Смените цвет прямоугольника на “F8F9F8” и перетащите его иконку на палитре Layers, чтобы он находился под всеми слоями контента, но поверх основного слоя с контейнером страницы. После этого примените к слою следующие стили:

В итоге вы должны получить такую картину:

13 Шаг

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

Выберите инструмент Line Tool (U) и, удерживая клавишу Shift нажатой, протяните горизонтальную линию в начале нашего градиента, идущую от левой до правой направляющей. Затем смените цвет этой линии на черный #000000.

Теперь понизьте Opacity этой линии до 10% и дублируйте ее, выполнив Layer > Duplicate Layer… и нажав Ok. Далее смените цвет дубля на белый #FFFFFF и задайте ему Opacity равным 100%. Сместите дубль на 1px ниже оригинала.

14 Шаг

Теперь давайте нарисуем наклейку, на которой будут указаны акционные цены, или что-нибудь в этом роде. Для этого выберите Ellipse Tool (U) и создайте окружность диаметром примерно в 120px в верхнем правом углу контейнера страницы. Смените цвет заливки на какой-нибудь более-менее визуально выделяющийся (можно на черный #000000).

Примените к слою следующие стили:

Дублируйте этот слой, выполнив Layer > Duplicate Layer… и нажав Ok. Затем измените размеры дубля, выполнив Edit > Transform > Scale и задав ширину и высоту равными 88%.

Примените к дублю такие стили:

Далее нам нужно выбрать оба этих слоя и выполнить Layer > Merge Layers.

После этого переключитесь на Marquee Tool и, удерживая клавишу Shift, растяните квадратное выделение шириной в 170px.

Далее выполните Select > Transform Selection и поверните выделение на 37 градусов. Затем перенесите выделение так, чтобы оно перекрывало лишь верхнюю левую часть кружка, как показано ниже.

После позиционирования выделенной области нажмите Enter для сохранения изменений трансформации и выполните New > Layer > Layer via Cut. Вырезанная часть кружка появится у вас на отдельном слое.

Теперь выберите только что созданный слой и выполните Edit > Transform > Rotate 180 Degrees. Подкорректируйте его положение так, чтобы он бесшовно вписывался в фигуру (мне нужно было сдвинуть его на 1px вниз и 1 влево).

Теперь давайте зальем загнутую часть наклейки одним цветом. Для этого выполните клик правой кнопкой мыши по слою с загнутым уголком и выберите пункт “Select Pixels”. Переключитесь на Brush Tool (B), задайте цвет кисти равным #58B672 и закрасьте слой с этим уголком.

Затем примените к слою следующие стили:

В итоге на стикер можно нанести какой-нибудь текст. Создайте три текстовых слоя со следующим содержимым и параметрами:

Первая строчка: “$24.95” с параметрами шрифта:

Вторая строчка: “$19.95” с параметрами:

  • Font Family: Geneva
  • Size: 19.5 px
  • Tracking: -75 px
  • Anti-aliasing: Strong
  • Color: #FFFFFF

Третья строчка: “Limited Time!” с настройками:

  • Font Family: Helvetica Neue
  • Font Style: Italic
  • Size: 10 px
  • Tracking: 0 px
  • Anti-aliasing: Crisp
  • Color: #FFFFFF

Разместите блоки с текстом, как показано ниже.

В качестве завершающего штриха переключитесь на Line Tool (U) и перечеркните надпись “$24.95”, как показано ниже. Смените цвет линии на белый (#FFFFFF).

15 Шаг

Заголовки для разделов страниц мы оформим в виде специальных графических вставок в виде ленточек.

Переключитесь на Rounded Rectangle Tool (U), задайте инструменту радиус закругления углов равным 14px и создайте прямоугольник размерами 235x30px. Затем смените цвет его заливки на #CCCCCC.

Далее переключитесь на Rectangle Tool (U) и удерживая Shift нарисуйте квадратик размерами 28х28px. Расположите этот квадратик так, чтобы его верхний край находился на расстоянии в 12px от верхнего края прямоугольника, а своим левым верхним углом он бы касался его левой кромки.

Теперь увеличьте масштаб примерно до 400% и переключитесь на Eraser Tool (E). Задайте ластику размер порядка 40px и переключите Mode в режим Brush. Наведите курсор ластика на место, показанное на рисунке ниже, и кликните по нему. Вам может потребоваться несколько попыток для этого, так как эта операция требует точности.

Теперь на палитре Layers выберите оба этих слоя (со скругленными углами и слой с квадратиком) и выполните Layer > Merge Layers.

К получившемуся в результате слияния слою примените следующие стили:

Затем выберите Ellipse Tool (U) и создайте окружность диаметром в 30px. Затем смените цвет круга на #444444.

Выполните Layer > Rasterize > Layer. После этого переключитесь на Marquee Tool (M) и создайте выделение по половине круга.

Теперь выполните Edit > Clear и переместите оставшуюся половинку под слой с лентой, чтобы получилось так, как на картинке ниже.

Последним шагом в работе над лентой будет нанесение на нее надписи. Переключитесь на Horizontal Type (T) и добавьте какую-нибудь надпись со следующими характеристиками:

  • Font Family: Helvetica Neue
  • Size: 16 px
  • Style: Regular
  • Tracking: -25
  • Anti-aliasing: Sharp
  • Color: #FFFFFF

Для того чтобы придать буквам объема, примените к тексту такой стиль:

16 Шаг

Скриншоты, которые мы поместим ниже, будут находиться в стильных контейнерах со скругленными углами. Кликните по Rounded Rectangle Tool (U) и создайте прямоугольник размерами 150x100px белого цвета (#FFFFFF).

Добавьте к этому слою следующие стили:

Теперь выполните Layer > Duplicate > Layer… и повторите дублирование еще три раза, чтобы в результате у вас на холсте получилось 5 одинаковых белых панелек. Разместите их на расстоянии по 30px друг от друга.

Теперь, чтобы добавить наши скриншоты на сайт, выполните File > Place для каждого скриншота, уменьшите его и поместите в каждый из контейнеров так, как показано ниже.

17 Шаг

Для прокрутки скриншотов нужно добавить пару управляющих кнопок. Выберите Ellipse Tool (U) и нарисуйте окружность диаметром 30px цвета #F8F9F8 на краю контейнера страницы напротив панельки со скриншотом.

Теперь переключитесь на Custom Shape Tool (U) и найдите там какую-нибудь стрелку. Растяните эту стрелку внутри кружка и смените ее цвет на #CFCFCF. Затем примените к ней следующие стили:

Далее выберите оба слоя: со стрелкой и слой с кружком и выполните Layer > Duplicate Layers… После этого выберите дубли, выполните Transform > Flip Horizontal и перенесите их на другую сторону блока скриншотов.

18 Шаг

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

19 Шаг

Для списка характеристик создадим трехколоночный макет в виде ячеек таблицы для лучшей организации информации на экране.

Начнем с добавления текста для раскрытия описания одного пункта. Выберите Horizontal Type Tool (T) и создайте надпись со следующими характеристиками для шрифта:

  • Font Family: Helvetica Neue
  • Size: 17 px
  • Style: Regular
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #252525

Здесь давайте вставим иконку. Я использовал иконки из сета “Project Icon Set”, который можно скачать здесь. Выполните File > Place… и выберите нужную вам иконку. Измените ее размеры (мне захотелось ее уменьшить до 28%).

Переключитесь на Horizontal Type Tool (T) и создайте текстовый блок вокруг иконки. Заполните этот блок каким-нибудь описанием, используя табуляцию или пробелы для обтекания иконки. Для шрифта используйте следующие параметры:

  • Font Family: Helvetica Neue
  • Size: 12 px
  • Style: Regular
  • Leading: -22
  • Tracking: -10
  • Anti-aliasing: Crisp
  • Color: #363636

20 Шаг

Перенесите заголовок, текст и иконку, которые вы только что создали в отдельную группу и дублируйте группу еще два раза (называйте группы “Feature 1”, “Feature 2”, “Feature 3” и так далее). Расположите группы на расстоянии в 70px друг от друга и измените текст и иконки нужным вам образом. Как справитесь, поместите эти три группы в еще одну группу и назовите ее “Row 1”.

Далее продублируйте группу “Row 1”, сместите ее на 70px ниже оригинала и также скорректируйте текст и конки.

Использование групп для организации пунктов и строк позволит впоследствии их с легкостью редактировать.

21 Шаг

В футер мы также добавим немного текста. Это будет копирайт и несколько ссылок.

Выберите Horizontal Type Tool (T) и напишите несколько слов. Поместите надпись под контейнером со страницей на расстоянии 30px от его нижнего края вплотную к левой направляющей. Задайте следующие параметры для шрифта:

  • Font Family: Helvetica Neue
  • Size: 12 px
  • Style: Regular
  • Tracking: 0
  • Anti-aliasing: Crisp
  • Color: #555555

Создайте еще один блок с текстом и добавьте туда несколько ссылок. Поместите этот блок на 30px ниже контейнера со страницей и вплотную к правой направляющей. Задайте тексту следующие настройки:

  • Font Family: Helvetica Neue
  • Size: 12 px
  • Style: Regular
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #333333

Заключение

Ну, вот и все! Я надеюсь, вы получили удовольствие от работы над этим уроком и открыли для себя нечто полезное, либо просто вдохновились для свершения новых проектов. Удачи и до встречи в следующих статьях!

Только до декабря. Тампопечать, изготовление бланков , книги в мягком переплёте.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.