Размер лендинга в фотошопе – Как создать прототип Landing Page в фотошопе

Далее используйте рандомный дефолтный свой любимый шрифт и напишите несколько надписей с ключевыми аспектами лэндинга. В самом большом круге добавьте +10pt к размеру шрифта.

Шаг 7: Кнопка призыва к действию (Call to action)

Итак, мы наконец-то добрались до call-to-action кнопки. Сделаем её с помощью инструмента Rounded Rectangle Tool. Выставьте радиус 3px + цвет #96c64f и нарисуйте элемент шириной 7px и высотой 35px, после чего добавьте к элементу Drop Shadow эффект:

Далее добавим Inner Shadow c Distance в 1px и Opacity на уровне 30%. Получим следующее:

И снова Bevel and Emboss для call to action кнопки. Этот эффект отлично справляется с задачей придания объёма элементам, именно поэтому мы его здесь и используем. Но с ним тоже не стоит особо перегибать, чтобы сделать эффект едва заметным, выставьте для опции Highlight Mode оставьте Opacity на уровне 0% а для Shadow Mode — на уровне 7%.

Далее добавляем к элементу эффект Gradient Overlay в режиме смешивания 

Теперь нам с вами предстоит добавить немного шума нашей кнопке. Существует множество разных техник, но мы продолжаем использовать паттерны. Как сделать свой собственный кастомный паттерн? 

• Создайте новый документ любого размера
• Создайте новый слой и удалите дефолтный бэкграунд
• Перейдите в меню Select > All
• Выберите Edit > Fill чтобы заполнить всё рабочее пространство
• Далее снимаем выделение Select > Deselect
• Добавляем достаточно заметный шум следующими действиями Filter > Noise > Add Noise
• Снова выделяем всё рабочее пространство: Select > All
• Переходим в меню Edit > Define Pattern

Поздравляем, вы создали собственный новый паттерн с шумом, который мы сейчас и добавим к кнопке. Добавляем Pattern Overlay и выбираем только что созданный паттерн.

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

Далее нам нужно создать небольшой элемент, который будет служить разделителем между иконкой и текстом на кнопке. Для этого создаём вертикальную линию высотой в 10px с помощью инструмента Line Tool. Добавляем к линии эффект Gradient Overlay со следующими параметрами:

Используем тот же шрифт, который мы использовали для заголовков и пишем призыв к действию, например надпись Download it Now. Придаём тексту тёмно зеленый цвет (#4d7500) и присваиваем эффект Drop Shadow с белым (#ffffff) цветом тени и Opacity на уровне 30%.

Далее добавляем любую понравившуюся вам иконку или рисуем свою. В нашем случае это будет иконка облака.

Шаг 8: Ленточка рядом с кнопкой

Используйте ту же технику, с помощью которой мы рисовали ленточку для логотипа и дополнительно уменьшите Opacity чтобы сквозь ленточку была видна фоновая картинка. Это важно также чтобы не отвлекать посетителя от главного call-to-action. После того как ленточка будет готова, напишите на ней что-нибудь, например «100% free».

Шаг 9: Секция основного контента

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

Используйте Rectangle Tool чтобы создать элемент шириной 220px и высотой 214px. Ниже полученного прямоугольника нарисуйте еще один маленький прямоугольник 5px высотой и светло-зеленым (#91c04c) цветом. Используйте подготовленные сэты иконок и расположите выбранную иконку в центре верхней трети прямоугольника. Далее используйте Horizontal Type Tool и Source Sans Pro выбранный вами шрифт серого цвета (#262626) для заголовка и более светлый оттенок серого цвета для остального текста (#9c9c9c). Дублируйте полученный элемент три раза чтобы в итоге у вас получилось 4 подобных элемента, замените иконки и заголовки на копиях. У вас должно получиться вот так:

Используйте Nevis или любой понравившийся вам шрифт в Bold размером 18pt и напишите какое-нибудь предложение. Цвет текста тот же самый, который мы использовали для Заголовков на предыдущем этапе, а зеленый цвет — это цвет зеленых прямоугольников, которые мы тоже делали на предыдущем этапе. Сделайте ударение на словосочетании «Contact Us» — оно будет ссылкой, поэтому сделайте его подчеркнутым.

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

Шаг 10: Футер, подвал … или как там его?

Используем Rectangle Tool чтобы создать элемент 1200px в ширину и 280px в высоту. Покрасьте его в серый цвет (#d0d0d0) — это и будет наш бекграунд для футера.

Используем Horizontal Type Tool и тот же шрифт что и раньше чтобы написать очередной Заголовок как на следующей картинке. Мы разделим наш футер на 3 секции и каждая из них будет иметь собственный заголовок. Как вы можете видеть на картинке, заголовок первого блока гласит «More About Us«. Добавим к нему Drop Shadow эффект с параметром Opacity на уровне 50% и Distance в 1px.

Используйте тот же шрифт чтобы написать текст-рыбу и придайте ему более светлый оттенок (#7a7a7a).

Используйте Line Tool чтобы создать простую серую линию, которая и будет служить разделителем между секциями.

Следующая секция будет называть «Newsletter«. Создайте поле для ввода имейла с помощью Rounded Rectangle Tool с радиусом в 3px. Придайте бекграунде очень светлый серый цвет (#f5f5f5). Give it a subtle Drop Shadow effect. Give the shape a really subtle 1px Stroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Добавьте пару эффектов по вкусу: например Drop Shadow и 1px Stroke. Напишите текст-рыбу для поля ввода.

Последняя секция носит название «Contact Us«. Она простая как двери и вряд ли отнимет у вас многов времени. Все шаги похожи на предыдущие, за исключением разве что более тёмных цветов для поля e-mail, location и phone number. Поэтому не будем особо на ней останавливаться.

Шаг 11: Finita la comedia

Поздравляем, дизайн вашего лендинга закончен. Теперь вы владеете основными приёмами для их создания и ограничены только вашей фантазией. Рекомендуем потренироваться и сделать 2-3 лендинга для себя или друзей для закрепления материала. В итоге у вас должно получить что-то хорошо напоминающее это:

Источник: designinstruct.com/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов

skillsup.ru

Целевая страница с помощью Photoshop

В этом уроке веб-дизайна мы будем создавать интересную целевую страницу (landing page) с помощью Adobe Photoshop. Здесь не будет ничего сложного, поэтому урок сможет подойти и для начинающих пользователей Photoshop. Эту страницу можно использовать для различных типов сайтов, немного изменив текст, навигацию, картинки, иконки в соответствии с потребностями. 

Вы можете нажать на изображение ниже, чтобы увидеть его в полном размере.

Ресурсы для урока

Шаг 1: Основные настройки документа

Для этой целевой страницы, мы будем использовать системы сеток. Это популярная 960 Grid System, которая поможет выравнять элементы страницы. 

С официального сайта  960 Grid System скачиваем  ZIP файл и открываем PSD файл с 12 колонками. Этот файл называется 960_grid_12_col.psd. Файл находится внутриemplates\photoshop. 

Давайте изменим ширину и высоту холстаPSD, чтобы получить немного больше места для работы. Переходим к  Image> Canvas Size и устанавливаем W idth — 1200 пикселей и  Height — 1330px

Leave about 245px from the top of the layout for our main header image.

Отступите где-то на 245px от верхней части макета, где будет находиться изображение для шапки.

Для остальной части макета зададим серый цвет ( # f0f0f0 ). Вы можете сделать это несколькими способами. В этом уроке мы использовали инструмент Прямоугольник. Выберите инструмент Прямоугольник на панели инструментов. На панели Options, убедитесь, что выбрана опция Shape Layers, и установите желаемый цвет: # f0f0f0 . Нарисуйте прямоугольник, который будет занимать весь холст , за исключением верхних 245px. Переименуйте слой на что-то вроде «base».

Шаг 2: Изображение header

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

Сделаем фото размытым. Сделать это можно несколькими способами, но мы будем придерживаться самого простого: Filter > Blur > Gaussian Filter. Установите  Radius — 4.0px .

Шаг 3: верхняя навигационная панель

Используйте Rectangle Tool (M), чтобы создать горизонтальную полосу прямоугольника вверху холста. Ее высота —  20 пикселей, а ширина занимает всю ширину холста.

Для слоя устанавливаем прозрачность Opacity — 2 5% . С помощью этого у нас получится полупрозрачная панель навигации. 

Переключитесь на инструмент Horizontal Type Tool (T).

Мы будем использовать  шрифт Sans Pro, который можно бесплатно загрузить на Google Web Fonts.

В панели Options настраиваем свой инструмент Horizontal Type Tool:

• font family: Source Sans Pro
• font style: Bold
• font size: 16px
• text color: #aed572 (a green color)

С помощью Horizontal Type Tool вводим номер телефона и вымышленный адрес электронной почты, или любой текст, который захотите. 

Также будем использовать несколько иконок с ресурса  Impressionist UI, либо другое бесплатные иконки. 

Цвет для иконок — белый (# FFFFFF). 

После того, как текст и иконки были размещены на нужном месте, применяем к ним тень Drop Shadow. 

Шаг 4: Логотип

Делаем видимыми направляющие, выбрав View> Show> Guides . Они помогут нам разместить ровно элементы будущего дизайна, в том числе логотип. 

Чтобы создать подобную форму, которую вы видите в левом верхнем углу нашего макета, пользуемся  инструментом Pen Tool (P). В создании ленты очень помогут направляющие. Для формы задаем светлый зеленый  цвет (# 79b02f).

Зададим для нашего логотипа некоторые стили. Начинаем с добавления светлого эффекта  Inner Shadow и прозрачностью 35%. 

Также добавим к логотипу некоторую глубину путем применения эффекта слоя Bevel and Emboss. Устанавливаем непрозрачность Opacity на 0% для Highlight Mode (потому что мы не нуждаемся в эффекте освещения) и устанавливаем непрозрачность для режима Shading Mode в на 15% 

Также добавим мягкий Gradient Overlay. Изменяем Blend Mode на Soft Light и Opacity ставим на 50% . 

Мы будет использовать эффект слоя Pattern Overlay для того, чтобы добавить некий узор к логотипу. Вы можете найти множество бесплатных узоров Photoshop на сайте subtlepatterns.com.

Устанавливаем непрозрачность в стилях слоя Pattern Overlay 5% .

Теперь с помощью инструмента Horizontal Type Tool вводим текст. Был использован шрифт Nevis, font style установлен Bold, font size — 36px.  Далее вводим буквы — «DM» .

После этого добавляем к текстовому слою тень Drop Shadow. 

Шаг 5: Заголовок

Используем шрифт Source Sans Pro, шрифт делаем жирным  Bold. Дальше пишем заголовки. Для верхней строки используем размер  24 pt, меньший заголовок под большим делаем размером 18 пт.

Добавляем для текста Drop Shadow.

Шаг 6: Круги

Далее под заголовками создадим рисунок, который будет состоять из кругов. Это будет два круга одинакового размера и один побольше в центре. Они будут соединяться линией в 5px.

Используйте Ellipse Tool, чтобы создать круги, а затем Line Tool с  Weight ​​в 5px , чтобы создать линию размером 5 пикселей, которая проходит через них.

Используя шрифт Bebas Neue, вводим случайный текст в центре каждого круга. Увеличиваем размер шрифта в среднем круге примерно на 10 пунктов.

Шаг 7: Кнопка

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

Ее будем создавать с помощью Rounded Rectangle Tool. На панели Options, нужно убедиться, что  выбрана опция Shape Layer, опция Radius установлена ​​на 3px и светлый зеленый  # 96c64f .

Затем создайте форму около 7 пикселей шириной и 35px высотой.

Добавляем эффект  Drop Shadow.

Также добавляем эффект Inner Shadow. Устанавливаем Distance 1px  и непрозрачность — 30%.

К кнопке нужно также добавить эффект Bevel and Emboss. Он должен быть едва заметен, поэтому устанавливаем Opacityдля режима Highlight Mode — 0%  и прозрачность Opacity для режима Shadow Mode —  7%. 

Давайте добавим к слою Gradient Overlay. Устанавливаем режим смешивания  Blend Mode на Soft Light и Opacity на 60%.

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

1. Создайте новый документ Photoshop (любого размера)
2. Создайте новый слой и удалите слой фона по умолчанию
3. Перейти к Select> All (который выделит область холста), чтобы выбрать весь холст
4. Выберите Edit> Fill , чтобы заполнить слой
5. Отмените выбор, перейдя в Select> Deselect
6. Добавьте большой шум, нажав Filter> Noise> Add Noise
7. Выделите весь холст снова ( Select> All )
8. Перейдите к  Edit> D efine Pattern и сохраните шаблон

Теперь вы создали свой шаблон Photoshop.

Затем вернитесь в основной документ Photoshop и добавьте к кнопке эффект Pattern Overlay, используя шаблон, который вы только-что создали.

Давайте добавим к кнопке обводку  Stroke. Для нее используем темный зеленый цвет. 

Теперь мы создадим небольшую форму, которая будет разделителем между иконой и текстом кнопки. Для создания этого используется Line Tool, чтобы создать вертикальную линию около 10 пикселей высотой.Примените Gradient Overlay для слоя с вертикальной линией.

Используйте тот же шрифт, который мы использовали для заголовка текста ( Nevis ),  ввести текст для веб-кнопки. Вводим фразу «Download it Now». 

Делаем текст темно-зеленым цветом ( # 4d7500 ) и применяем эффект Drop Shadow, где цвет тени будет установлен белый  ( # FFFFFF ) и  Opacity на 30%.

Шаг 8

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

Во-первых, нужно использовать инструмент Elipse для создания от 4 до 5 кругов. Нужно удерживать нажатой клавишу Shift во время рисования кругов. 

Теперь, установите Fill для слоя с иконкой на 0% — это можно сделать в панели Layers.

После этого для слоя добавляем обводку  Stroke в  2px, темно-зеленый цвета.

Шаг 9: Лента рядом с кнопкой

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

Уменьшите Opacity формы. 

Введите текст на ленте. В уроке был набран текст  «100% free».

Шаг 10: Раздел «Избранное»

Давайте работать с разделом «Избранное».

Используйте Rectangle Tool (U), чтобы создать прямоугольник шириной 220 пикселей и высотой 214 пикселей.

В нижней части прямоугольника добавляем зеленый прямоугольник ( # 91c04c ) высотой около 5 пикселей.

Помещаем любую иконку в верхний центр прямоугольника.

Используйте инструмент Horizontal Type Tool (T)  и шрифт Sans Pro, чтобы ввести название возле иконки — темно-серый цвет ( # 262626 ) и светло серый текст ( # 9c9c9c ).

Дублируйте группу  прямоугольника, иконки и текста 3 раза, чтобы в конечном итоге получилось 4 панели. Нам нужно изменить иконки и текст в этих прямоугольниках. 

Используйте шрифт  Nevis, font style —  Bold, font size — 18pt и введите текст. Используйте серый цвет такой же, как и для текста в предыдущих шагах. 

Акцентируйте внимание на последнем слое  («Контакты»), где будет размещена гиперссылка. В панели Character (если вы не можжете найти эту панель, перейдите к Window > Character), нажмите опцию underline, чтобы подчеркнуть текст. 

Добавляем Drop Shadow.

Используйте тот же серый цвет, чтобы ввести тест и помещаем его под заголовком. Возьмите иконку кошелька и делаем ее таким же цветом, как и другие иконки. Затем добавляем эффект Drop Shadow зеленого цвета. 

Шаг 11: футер

Используйте Rectangle Tool (U), чтобы создать форму шириной 1200px и шириной 280 px.  Сделайте его светло-серым цветом ( # d0d0d0 ). Это будет фоном для нашей колонтитула.

Используйте инструмент Horizontal Type Tool (T) и тот же шрифт, чтобы ввести текст заголовка, как на рисунке ниже. Мы будем делить наш футер на три части, и каждая из которых будет иметь заголовок. Как показано ниже, заголовок первого раздела «More About Us«. К заголовку применяем эффект Drop Shadow с непрозрачностью в 1%.

Используйте тот же шрифт, чтобы написать следующий  текст. Для текста выберите светлый цвет ( # 7a7a7a ).

С помощью Line Tool (U) создаем простую серую линию, которая будет разделять каждый раздел. 

Следующий раздел футера будет иметь название  «Newsletter«.  С помощью Rounded Rectangle Tool (U) и Radius в 3px создаем поле для ввода светло-серого цвета ( # f5f5f5 ).  Добавляем к тексту эффект  Drop Shadow. Добавляем к полю небольшую обводку Stroke в  1px.  Используйте инструмент Horizontal Type Tool (T), чтобы ввести в форму текст .

Наш последний раздел футера —  «Контакты «. В разделе размещаем иконки и текст. 

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

Исходный файл

Автор: STELIAN SUBOTIN 

Перевод — Дежурка

www.dejurka.ru

Размер лендинга | ЗЕКСЛЕР

Размер первого экрана

Первый экран – это то, что видит пользователь при открытии страницы. Здесь стоит задача – заинтересовать потенциального клиента. Первый экран соответствует высоте экранов устройств пользователей. Экраны бывают совершенно разных размеров, но чаще встречается высота в 700-1000 пикселей. Поэтому первый экран лендинга следует разрабатывать в соответствии со среднестатистическим разрешением. Отметим, что сегодня большинство людей пользуются мобильными устройствами, поэтому лучше сделать лендинг, подстраивающийся под любое разрешение экрана.

Разработка первого экрана лендинга считается самой важной частью работы веб-дизайнера. Открывая несколько ссылок одновременно, пользователь тратит 3-6 секунд на оценку каждой из них, если страница изначально посетителю не интересна, то более вероятно, что он ее просто закроет и начнет искать дальше. Первый экран должен вызвать желание остаться и пролистнуть вниз для дальнейшего изучения страницы.

​ ​

Шрифты для лендинга

Правильное восприятие информации лендинга зависит от подобранного шрифта. Для основного текста наиболее подходят шрифты с засечками или рубленные шрифты. Размер должен быть не менее 12 пунктов, лучшим вариантом является – 14 и 16 пунктов. Заголовки можно увеличить от 18 и до 32 пунктов. Посетитель лучше воспринимает крупные буквы, мелкие и непонятные шрифты вызывают раздражение.

​

Оптимальная структура лендинг-пейдж

Структура успешного лендинга выглядит следующим образом:

• первый экран;
• «тело» лендинга или основные экраны;
• последний экран.

Внутри предыдущих блоков лендинги должны иметь следующие элементы:

1. Дескриптор.
2. Контакты.
3. Уникальное торговое предложение.
4. Визуальное представление товара.
5. Форма для отправки контактных данных посетителей сайта.
6. Преимущества.

Также в лендинг могут добавляться следующие элементы:

• принципы работы компании;
• акции с обратным отсчетом и формой отправки контактов;
• полный блок с контактами фирмы;
• портфолио с примерами выполненных работ;
• награды, сертификаты, грамоты.

Настройка элементов лендинга

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

Контактные данные – обычно номер телефона для связи и адрес. Если посетителя заинтересовал предыдущий блок, дальше он захочет узнать, как это получить. Здесь также можно добавить кнопку – «заказать обратный звонок».

УТП – такое описание услуги и товара, которое поможет пользователю понять, почему он должен остановить выбор на вашем продукте.

Визуализация товара – демонстрация товара/услуги с использованием фото- или видеоматериалов. Здесь стоит задача позволить будущему клиенту прочувствовать продукт, представить его в личном пользовании.

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

Преимущества – описываются достоинства компании и основные отличия от конкурентов.

Необходимо уделить внимание следующим деталям лендинга, расположенным чаще всего на первом экране:

• заголовок – краткий и четкий, отображает суть предложения страницы;
• логотип компании в виде изображения;
• описание продукта и его свойств;
• отзывы клиентов – помогают повысить уровень доверия новых посетителей;
• при наличии аккаунтов в социальных сетях – иконки, нажав на которые, можно взаимодействовать с продуктов в других Интернет-ресурсах.

zexler.ru

Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

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

Предыдущие уроки:

1. Создание дизайна Landing Page для студии разработки сайтов (Урок 1)
2. Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

Для создания дизайна нам понадобится сетка 960 Grid System, немного модифицированная и расширенная для Bootstrap на 1140 пикселей. Это 12-ти колоночная сетка для Adobe Photoshop, так как рисовать дизайн сайта мы будем именно в этой программе: Скачать сетку

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

Фон первого экрана

Итак, откроем нашу сетку в фотошопе и сразу обозначим первый экран Landing Page – нарисуем прямоугольник шириной в документ и высотой 640 пикс. Зададим ему цвет фона #663399:

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

Ластиком ровными штрихами удалим некоторые части белой маски, создавая эффект больших осветляющих пятен:

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

Далее нарисуем верхнюю полосу меню – это прямоугольник черного цвета, высотой 60 пикс, непрозрачность слоя – 85%:

Логотип

Напишем шрифтом Echoes Slab логотип – MyStudio, размером 24 пикс, белым цветом. Оставив справа от сетки немного место для графического элемента логотипа.

Графическим элементом логотипа я придумал бриллиант. Найдем изображение векторного простого бриллианта в гугл картинках, мне понравился этот:

Откроем его в Inkscape и векторизируем растр (Объект > Векторизировать растр):

У меня получился такой png патч, можете скачать его, минуя работу в Inkscape:

Экспортируем наш векторизированный бриллиант в png и вставим в наш макет в фотошопе.

Уменьшим до необходимых размеров и наложим красный цвет — #ff3838:

Можно бриллианту добавить красного внешнего свечения цветом #ff0000:

Заголовки

Наш несложный логотип готов, напишем заголовки у первого экрана, см. наш прототип из первого урока. Размер заголовка – 50 пикс, размер подзаголовка – 20 пикс. Цвет заголовка — #ffffff, цвет подзаголовка – возьмем пипеткой с фона и осветлим:

Отлично, но мы забыли меню и телефон из прототипа. Их мы напишем шрифтом Exo 2 Light, его также можно взять на сайте Fonts4Web.ru. Цвет – белый, подчеркивание активного пункта и пункта при наведении мышью сделам красным, взяв цвет из логотипа – простоя однопиксельный прямоугольник. Размер меню – 16 пикс. Меню делаем по сетке – 4, 5, 6, 7 ,8 и 9-я колонки:

И напишем телефон в последних трех колонках сетки, также белым цветом, шрифт Exo 2 Regular, размер 22 пикс. Под телефоном – более мелким шрифтом напишем «Заказать звонок»:

Далее по прототипу у нас слайдер с последними работами. Нарисуем по сетке 4 прямоугольника черного цвета с непрозрачностью 25%. Хоть в прототипе мы нарисовали 3, но в данной сетке можно разместить и 4:

Оставим по одной колонке сетки по краям для навигации по слайдеру.

Заполним элементы слайдера логотипами крутых компаний, я выбрал эти для примера:

Создадим прямоугольники меньшего размера и заполним нашими логотипами, применив обтравочную маску для каждого изображения. Фон каждого прямоугольника зальем цветом, соответствующим цвету на картинке:

Добавим навигацию слайдера. Для этого по крайним колонкам разместим стрелки. Их можно взять, например, из шрифта Ruslan Display. Размер стрелок 60 пикс, непрозрачность 25%.

В прототипе мы определили, что будем внизу каждой секции размещать стрелку вниз, которая будет свидетельствовать о том, что можно почитать что-нибудь ниже текущего экрана. Давайте создадим такую галочку на фигурном фоне. Нарисуем инструментом «Многоугольник» фигуру c пятью конечностями. Наложим легкий, с едва заметным переходом оранжевый градиент:

Отлично. Можно, конечно еще поработать, сделать что-нибудь интересное, наложить какой-нибудь паттерн на фон шапки, но этого, думаю, будет достаточно.

Результат выполнения урока:

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-дизайн»

webdesign-master.ru

как сделать лендинг пейдж для страницы

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

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

С чего начать перед нарезкой изображения для Инстаграм?

Как правило, лендинг состоит из 9 изображений (3 ряда по вертикали и 3 ряда по горизонтали). Миниатюры этих изображений на главной страницы профиля объединяются в одну единую картинку. Соответственно для начала нам необходимо подготовить изображение и разрезать его на части.

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

Процесс создания лендинга для Instagram в Photoshop

Мы пошагово расскажем, как с помощью шаблона, который мы дали выше, правильно нарезать своё рекламное изображение:

1. Подготавливаем картинку для нарезки размером 3084×3084;
2. Открываем psd шаблон через программу Photoshop. В шаблоне мы увидим 9 ровно нарезанных черных квадратиков;
3. Нам необходимо перетащить подготовленное нами изображение во вкладку шаблона. При этом слой нашей подготовленной картинки должен быть выше слоя квадратов. После того как мы перетащили, нам необходимо во вкладке «слои» кликнуть по нашей картинке 3084×3084 правой кнопкой мыши и выбрать «создать обтравочную маску»;
      
4. После манипуляций из пункта 3 можно спокойно переходить к сохранению нашей нарезки. Чтобы сохранить каждый квадратик по отдельности нам необходимо нажать «файл», далее «Сохранить для WEB…», в всплывшем окне выбрать сохраняемый формат и нажать «Сохранить…».
       
5. Выбираем папку для сохранения и сохраняем. В том месте, куда мы произвели сохранение, появится папка с нужной нам нарезкой. Удаляем картинки белых полосок и готово. 

Последний шаг

Мы с вами проделали ряд простых манипуляций и сделали 90% необходимой работы. Теперь у нас на руках 9 ровно нарезанных частей нашего большого изображения. Нам остается лишь залить их в Инстаграм. Делать это необходимо начиная с нижнего правого угла с права налево. Но не нам дальше вас учить, думаем, вы разберетесь с этой простой задачкой.

Таким образом мы создаем красивое оформление для Инстаграм в стиле лендинг. Подобным образом вы можете резать любые картинки, всё зависит от вашей фантазии. Спасибо за внимание и удачи в продвижении!

Даём еще раз ссылочку на скачивание PSD шаблона.

instagramsoft.ru