От автора: на прошлых занятиях мы рассмотрели теоретические основы веб-дизайна. Пора переходить к практическим занятиям, поэтому сегодня Вы получите базовые уроки веб-дизайна в Фотошопе и научитесь создавать стильные кнопки для сайта.
Рекомендую Вам, в первую очередь, изучить именно эту программу. Новички, любители и профессионалы - все работают в Фотошопе. Без него не представляют своей жизни тысячи дизайнеров, художников, полиграфистов и веб-мастеров.
Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить - самым лучшим графическим редактором.
Данная статья будет Вам полезна в том случае, если Вы только учитесь использовать Photoshop в своей работе. Сразу приготовьтесь к тому, что будете постоянно изучать эту программу, совершенствовать свои навыки и вырабатывать свой собственный стиль.
Как начать изучение Фотошопа?
Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже - придется довольствоваться PhotoshopCS5.
Установили? Молодцы, теперь пришло время познакомиться с всевозможными инструментами и элементами интерфейса. Если будете регулярно заниматься уроками Photoshop для web-дизайна, то постепенно изучите все эти инструменты в процессе практических занятий.
Не пугайтесь этой программы, даже если начинаете ее изучение с нуля. В Вашем распоряжении тысячи книг, журналов, комплексных обучающих видеокурсов и уроков дизайна сайта в Фотошопе, которые структурированы таким образом, чтобы донести до новичка максимум полезной информации в кратчайшие сроки.
Дополнительно я бы посоветовал Вам полазить по разным профессиональным сайтам и изучить их оформление и структуру, чтобы найти сведения о модных тенденциях в сфере веб-дизайна, сформировать свое личное видение и развить художественный вкус.
Как настроить Photoshop для веб-дизайна?
Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.
Создаем новый файл: Файл - Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение - 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.
Вообще, к параметрам создания нового документа относятся:
Имя будущего документа. Его обычно назначают при сохранении файла;
Ширина и Высота изображения. В нашем случае задается в пикселах, которые представляют собой единицу изображения в растровой графике;
Разрешение - количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;
Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;
Содержимое фона, определяющее фон изображения.
Следующая настройка, о которой хотелось бы упомянуть, и о которой часто незаслуженно забывают, - это настройка обычной стрелки. Ставим галочку в Автовыборе, выбираем Слой и «Показывать управление трансформацией». Благодаря этому параметру вокруг выделенных областей будет появляться пунктирный прямоугольник с манипуляторами в серединах и углах сторон.
Ну и последняя настройка, которую нужно сделать, - это настройка на позитив . Без нее у вас не будет достаточной мотивации, чтобы эффективно и последовательно проходить уроки веб-дизайна в Фотошопе.
Создаем прямоугольник в Photoshop
Расскажу Вам, как сделать простенький объект в Фотошопе. С помощью инструмента «Прямоугольник» создаем одноименную фигуру, задаем ей нужный цвет заливки и границы. Здесь же можно создать прямоугольник с закругленными углами.
Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение.
Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Делаем кнопку для сайта в стиле flat design
Направление «плоский дизайн» в последнее время чрезвычайно популярно в создании сайтов. При этом отрисовка его элементов не требует экстраординарных художественных навыков.
Чтобы вы не отставали от современных тенденций, в сегодняшнем уроке веб-дизайна в Фотошопе я научу Вас, как быстро и легко сделать кнопку для сайта, даже не обладая глубокими знаниями этой программы.
Создаем новый документ Файл - Новый и выбираем инструмент «Прямоугольник со скругленными углами».
Выбираем цвет, например, оранжевый #ff8b00, и радиус углов - 4 пикселя.
Рисуем кнопку нужного размера:
Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.
Получится примерно такой результат:
На верхний прямоугольник можно добавить стиль «Градиент». С помощью двойного клика нажмите на слой с фигурой, выберите стиль «Наложение градиента» и поставьте угол наклона 90 градусов.
Веб-дизайн многогранен и включает в себя не только работу над макетом по принципу «что где будет располагаться», но и создание необходимых изображений, обработку фотографий, различных элементов пользовательского интерфейса, иконок, клипартов, продумывание типографики и сочетания шрифтов и многое-многое иное. Поскольку веб-дизайнеры создают визуальный макет, то использование Photoshop более чем удобно и понятно. Но между тем, различные мастера в мире стараются пользоваться огромным набором приложений компании Adobe и при создании одного только макета задействуют и Illustrator, и Fireworks, и InDesign, даже новейший Experience Design (XD).
«Но зачем так много? » - спросите вы. «Какой от них может быть толк и есть ли он вообще? ». Ответ и прост и сложен. Дело в том, что с одной стороны, все продукты Adobe предназначены для разных целей, с другой - кто к чему привык, а с третьей - они имеют интеграцию друг с другом. Впрочем, отличительные и особенные нюансы у каждого приложения все же есть и мы ниже постараемся их рассмотреть. Если грамотно использовать возможности каждого отдельного продукта, то создание дизайна сайтов станет проще, а может, и быстрее в некоторых моментах.
Наша цель не рассказать о конкретной работе в каждом приложении, но обратить внимание на их особенности, цели, задачи, решаемые ими. Если вы уже выбрали в чем работать, а это 99,9% Photoshop, то продолжайте совершенствоваться именно в этом, а прочее оставляйте для дополнительных возможней и расширения навыков.
Photoshop в веб-дизайне
Изначально приложение было создано для редактирования и ретуши растровых изображений и работе с фотографиями. Спустя 25 лет приложение позволяет создавать и редактировать 3D-объекты, работать с освещением в изображениях, цветностью, слоями, создавать анимацию и прочее.
В течении многих лет во всем мире Photoshop подходит и для создания веб-сайтов и макетов в формате PSD, благодаря, как раз таки, возможности работы со слоями. Они позволяют менять положение пользовательских элементов, отдельно редактировать их. Более того, макеты в Photoshop способствует тому, что сайты всегда будут в веб-браузере выглядеть так, как вы их изначально задумали при любом разрешении экрана. Стоит отметить набор фильтров, инструментов, плагинов для приложения.
Illustrator в веб-дизайне
Приложение для векторной графики. При этом можно создавать как отличные клипарты, так и иконки, крошечные favicon без потери качества и появления пикселей, как в случае с растровой графикой. Разумеется, что при необходимости обработки логотипа, так же подойдет данное приложение.
Но если рассматривать Illustrator с точки зрения веб-дизайна и макета сайта, то он не подходит как таковой. Как минимум, откорректировать фотографию вы не сможете и со шрифтами «поиграться» тоже. Что уж говорить о разметке и вёрстке, анимации. Впрочем, последнее обновление Illustrator CC (2017.1) от 5 апреля 2017 года позволяет обрезать растровое изображение без сторонних программ. В результате, обрезанные части не сохраняются, а размер общего файла уменьшается. Тем не менее, полноценно работать с изображениями в Иллюстраторе все же невозможно, но некоторые веб-мастера умудряются создавать макеты сайтов в формате AI и отсылать их заказчикам.
InDesign в веб-дизайне
Приложение, которое до сих пор поддерживается Adobe и предназначено для макетов печатной продукции (брошюр, плакатов, журналов, листовок). Но между тем, работать с сайтом тоже можно, хотя сложнее и сохранить в PSD не получится, а импорт этого формата бывает корявым частенько. Зато можно обрабатывать большие объемы текста. Настраивать колонки, поля, стиль. Назначить нумерацию для страниц, перемещать макеты, упорядочивать и многое другое.
Приложение обладает готовыми модульными сетками, есть панелька для просмотра готовых страниц, даже, например, можно создать шаблон footer и закрепить его один раз на все страницы. Можно даже редактировать AI и PSD. Но для работы Landing Page, с промо-станицами все равно потребуется Photoshop. Если же ваш сайт предназначается для большого количества текста или заказчик заказал макет множества страниц (более3-4) и готов их увидеть даже в PDF формате, то создать его в InDesign реально и удобно.
Глубокий анализ
Мысль о том, что логотипы и иконки проще создавать в Photoshop - не самая лучшая, ибо векторная графика в приложении превращается в растр. Для того чтобы искажения и пиксели были не видны, такой растр должен иметь очень высокое разрешение, что будет являться, по сути, уже вексельной графикой . Если готовую векторную картинку вставить из Illustrator - она будет пиксельной. Именно поэтому удобнее иметь или наборы готовых изображений в векторе или Illustrator на компьютере, дабы была возможность работы с вектором.
InDesign, несмотря на то, что предназначен для верстки печатной продукции может предложить минимальный набор для создания элементов веб-дизайна. Настолько минимальный, что все равно придется использовать сторонние программы. Нет даже подобающего функционала для работы с фотографиями и логотипами, фильтров.
Но вот в чем проблема. InDesign создает макеты страницы на основе готовых и имеющихся у него шаблонов. Даже сверстать их может и сгенерировать CSS и HTML. НО! Этот код не будет оптимизирован для различных браузеров. Как говорится: «код будет грязным». Очистка его превратиться в сложную рутину, которая у веб-разработчика отнимет колоссальное количество времени, а автоматический вариант не справится и вовсе. Именно поэтому Photoshop имеет большее преимущество, даже несмотря на то, что творческий процесс занимает большее количество времени. InDesign подойдет только тогда, когда заказчику нужен макет большого сайта с несколькими страницами, разными по содержанию и с большим количеством текста.
Почему не подойдет Photoshop? Потому что придется создавать отдельные PSD для каждой страницы и прорисовывать отдельно (InDesign есть шаблоны), а настроить между ними (страницами) связь и активные ссылки не получится. Более того, создать все страницы в одном PSD тоже не вариант - размер файла будет большим и затем уже верстальщикам будет неудобно разбираться, что и где. Именно поэтому при работе над большими страницами, над Landing Page - Photoshop лучшее, что может быть.
Если говорить о Illustrator и InDesign , то они похожи, с той разницей, что Иллюстратор не имеет возможности создания нумерации страниц и шаблонов книг. Но зато AI поддерживает монтажные области для создания брошюр или перевода макетов в формат PDF. В дальнейшем такой макет удобно представлять заказчикам/клиентам/партнерам. То есть Illustrator держится некоторым особняком от прочих приложений и выполняет особую роль в веб-дизайне.
Существует и такое приложение у Adobe, как Fireworks . Точнее существовал, но об этом чуть позже. Задача приложения - обработка растровых и векторных изображений для сайтов. Особенность в том, что в нем удобно делать элементы пользовательского интерфейса. Даже есть возможность проверить их работоспособность, добавить анимацию и прочее. В Photoshop это делать кропотливее. Поэтому многие известные веб-мастера имеют это приложение тоже на компьютере и сочетают в создании макета сайтов и PS, и Fw. Плюсом является то, что объекты, созданные в Fw можно переводить в CSS и HTML и затем уже вставлять непосредственно на страницы сайта. Да и код создается чистым.
Adobe Experience Design
Но сейчас программа более не поддерживается и на смену ей уже приходит Adobe Experience Design или XD . Доступна она в бета-версии для Windows и Mac бесплатно на официальном сайте . Что это за зверь? Adobe XD создаётся для макетов интерфейсов мобильных приложений, сайтов. То есть, если InDesign создан все же для полиграфии и печатной продукции, а возможность создания документов для Web как бонус, то Adobe XD создается, наоборот, для разработки «цифровой продукции», мобильных интерфейсов, десктопных. Существует совместимость с Illustrator, Photoshop, можно создавать кнопочки, макеты, элементы, работать с ссылками, переходами, анимацией, видео. И еще много всего. Можно создавать макет и видеть его в действии.
Между тем, некоторые веб-дизайнеры не стремятся на него переходить. Выглядит приложение уж больно «сырым» и многих возможностей, к которым люди уже привыкли и в Fireworks, и в Photoshop попросту нет. Да, шаблоны и принципы создания макетов разрабатывались Adobe при поддержке многих именитых специалистов, но реализовано все это еще не слишком успешно. При получении заказа на создание дизайна сайта гораздо быстрее открыть PS и нарисовать в нем, что-то создать и перенести из Fw или AI. Времени затрачивается гораздо меньше.
Так что выбирать
Итак, Adobe для веб-дизайнеров предлагает большой ассортимент приложений, каждое из которых удобно по-своему и выполняет разные задачи. Но при этом нужно понимать, что главное при создании дизайна сайтов - сделать быстро и качественно. Соответственно, выбор падает на привычный и удобный Photoshop и Illustrator для работы с вектором. Но не стоит забывать и о Fireworks, даже не смотря на то, что он не поддерживается уже, им продолжают пользоваться во всем мире. Свои непосредственные функции и задачи он выполняет. А стремиться заменять его на Adobe Experience Design тоже вопрос спорный, ибо до сих пор в версии для Mac функционала больше, чем в версии для Windows.
Цель нашего материала была не рассказать вам: «О, смотрите, это же уникальная вещь, пользуйтесь только ею! ». Нет! Мы хотели просто напомнить, какие продукты у Adobe существуют для упрощения и ускорения работы веб-дизайнера и верстальщика. Рассмотреть заблуждения и нюансы этих программ, которые обычно становятся явными только после нескольких часов кропотливой работы в них.
Photoshop действительно самая удобная программа для дизайна-сайта, InDesign подойдет для макета, Illustrator - для векторных картинок, Fireworks/ Adobe Experience Design - совокупное приложение для веб-дизайна, растровых и векторных изображений. Здесь же отметим, что некоторые веб-мастера вообще стараются в своей работе не использовать Photoshop вообще и все делать только в Fireworks, даже в нынешнее время. Или не пользуются продуктами Adobe, но это же внутрикорпоративные особенности. Так или иначе, это отдельная тема, тем более что с каждым годом Photoshop продолжает улучшаться, а Fireworks переходит в формат XD.
В этом уроке мы будем использовать Adobe Photoshop для разработки веб-интерфейса, который может быть использован для любого мобильного сайта. Мы будем использовать различные методы, включая формы, маски, иконки, шрифты и многое другое, что может быть легко применимо к вашим собственным разработкам в веб-дизайне.
Финальное изображение.
Материалы для урока:
Шаг 1. Начнём с создания нового документа. В меню Файл - Новый (File - New) установим ширину и высоту 1100px, разрешение 72, фон - белый.
Далее, нам необходимо создать две направляющие, которые будут выступать в качестве границ для нашей страницы.
Выберите меню (View - New Guide). Для первой направляющей поставьте Ориентация - Вертикальная и
положение 70 пикселей. (Orientation to Vertical and the Position 70 px).
Для второй направляющей снова выберите меню Просмотр - Новая направляющая
(View - New Guide) и поставьте Ориентация - Вертикальная
и положение 1030 пикселей.
И так, мы подготовили пространство для нашей веб-страницы шириной в 960 пикс.
Шаг 2. Следующий шаг - подготовка фона. Выберите инструмент Заливка (Paint Bucket Tool (G)), установите цвет переднего плана на 1e1e1e . Затем щелкните в любом месте на холсте, чтобы применить цвет к фоновому слою.
Давайте добавим текстуру нашему фону. Сделаем это в меню Фильтр - Шум - Добавить шум (Noise > Add Noise). Поставьте радиус (Amount) 2.5 и щёлкните ОК.
Шаг 3.
Далее мы собираемся высветлить верхнюю часть нашей страницы. Этот ход будет привлекать основное внимание именно в эту область, иными словами - там будет фокус.
Выберите инструмент Кисть
(Brush Tool), измените размер до 400 пикселей, Жесткость (Hardness) 0%
Создайте новый слой и назовите его "Spotlight".
Измените цвет переднего плана на "FFFFFF" (белый) и создайте круг в верхней части документа с помощью инструмента Кисть (Brush).
Чтобы вписать этот слой в фон, ему так же добавим немного шума, выбрав Фильтр - Шум - Добавить шум (Filter> Add Noise). Установите такие настройки. Эффект (Amount) 20 и выберите опцию Монохромный (Monochromatic) и кликните ОК.
Чтобы сгладить эту вспышку выберите Фильтр - Размытие Размытие по Гауссу
(Filter- Blur-Gaussian Blur).
Установите радиус до 50,0 и нажмите кнопку ОК.
Наконец установите непрозрачность слоя Spotlight около 25%.
Шаг 4.
Настало время добавить элементы графики. Скачаем изображение iPhone. Имейте в виду, вы можете использовать любой телефон, который соответствует вашим конкретным задачам (Android, Blackberry, и т.д...).
После загрузки откройте PSD файл в Photoshop. Раскройте папку “iPhones” щелкните правой кнопкой мыши на папке “iPhones” и выберите Дубликат группы
(Duplicate Group). В появившемся окне дайте название группе (я использовал "iPhone") и укажите тот документ, над созданием которого вы сейчас трудитесь и нажмите кнопку ОК. Как только вы закончите, закройте PSD с iphone.
Позиция нашего первого iPhone касается левой направляющей и примерно 100px от верхней части холста документа.
Сейчас самое время настроить скриншот в iPhone. Самый простой способ сделать это - поместить взятый в интернете скриншот меню телефона и поместить его на самый верх группы ” iPhone” , подогнать размер под размер экрана.
Дублируйте группу iPhone выбрав меню Слои - Дубликат группы
(Layer - Duplicate Group), назовите её “iPhone 2″ и нажмите кнопку ОК в диалоговом окне.
В меню Редактирование - Трансформирование - Масштабирование
(Edit- Transform- Scale) изменим размер второго телефона. В настройках введите 107.0% по ширине и высоте. Позиция этого iPhone будет примерно 50px от верхнего края и 200px от левой направляющей.
Повторите шаг замены экрана в "iPhone 2" как упоминалось выше.
Шаг 5.
Последний штрих для наших Iphones является создание их отражения. Выделим две группы -“iPhone” и “iPhone 2″, затем в меню Слои - Дубликат слоёв
(Layer - Duplicate Layers) и нажмём ОК. Затем снова меню Слои
- Объединить слои
(Layer - Merge Layers).
Далее нам нужно перевернуть наши телефоны чтобы создать отражение. Пройдите в меню Редактирование - Трансформирование - Отразить по вертикали
(Edit- Transform- Flip Vertical). Подгоните отражение под оригинальные телефоны.
Добавить маску слоя, нажав на иконку маски слоя в панели слоев.
Выберите инструмент Градиент (Gradient Tool (G)) от черного к белому и проведите линию сверху вниз по слою с отражением.
Наконец понизьте непрозрачность этого слоя до 30%.
Шаг 6.
Далее следует добавить основные детали справа от наших телефонов. Прежде чем мы начнем, давайте добавим еще одну направляющую, чтобы можно было по ней выровнять будущие элементы дизайна. Выберите меню Просмотр - Новая направляющая
(View - New Guide). Для этой направляющей поставьте Ориентация - Вертикальная
и положение 550 пикселей. (Orientation to Vertical and the Position 550 px).
Примерно 100 пикс. от края документа мы добавим логотип. Автор использовал свой логотип. Вы можете просто использовать текст или вставить свой логотип.
Ниже логотипа мы добавим текст с описанием нашего приложения. Выберите инструмент Текст
(Horizontal Type Tool) и нарисуйте прямоугольник между центральной и правой направляющими. Установите такие настройки для текста:
Шрифт
(Font): Helvetica Neue
Размер
(Size): 16 px
Стиль
(Style): Regular
Интерлиньяж
(Leading): 26 px
Трекинг
(Tracking): -25
Сглаживание
(Anti-aliasing): Crisp Чёткое
Цвет
(Color): #FFFFFF
Шаг 7. Далее мы создадим кнопку для посетителей, которые хотят приобрести наш продукт. Используем для этого инструмент (Rounded Rectangle Tool (U)) Нарисуем прямоугольник с такими настройками 240x75px 4px, где 4 это радиус скругления углов. Выровняйте кнопку левой стороной к центральной направляющей и опустите её ниже текста примерно на 45 пикс.
Теперь применим несколько стилей слоя. Дважды мышкой по слою в панели слоев и используйте скриншоты ниже для настроек.
Вставим иконку Apple и изменим её непрозрачность на 30%.
Справа от иконки добавим ещё текст, настройки ниже:
Шрифт
(Font): Helvetica Neue
Размер
(Size): 11 px и 24 px
Стиль
(Style): Bold
Интерлиньяж
(Leading): 26 px
Трекинг
(Tracking): -25
Сглаживание
(Anti-aliasing): Crisp Чёткое
Цвет
(Color): #FFFFFF
Добавим стили слоя к тексту. Воспользуйтесь настройками со скриншота.
Измените непрозрачность слоя с линией до 15%, дублируйте его, выбрав меню Слои - Создать дубликат слоя (Layer> Duplicate Layer) и нажмите кнопку ОК. Измените цвет этой линии на # 000000 (черный) и измените непрозрачность слоя со второй линией до 10%. Затем переместите чёрную линию на 1px влево от белой линии.
Последний элемент этой кнопки - значок, который указывает на Скачать. Воспользуемся инструментом Эллипс (Ellipse Tool) и нарисуем круг 25px в диаметре.
Добавьте следующие стили слоя для эллипса:
Наконец возьмите инструмент Произвольная фигура (Custom Shape Tool) и выберите стрелку (я использую форму "Стрелка 9"), нарисуйте стрелочку белым цветом 10px в ширину, разместите внутри круга.
Шаг 8. Создадим фигуру, на которой будет отображаться цена продукта. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), радиус скругления углов 4 пикс. Прямоугольник должен перекрывать собой кнопку загрузки и быть размером 52px в высоту и любой ширины больше чем 100 пикселей.
Изменените цвет этого прямоугольника на "2B2B2B " и переместите его ниже кнопки загрузки в панели слоёв.
Обводку
Теперь мы можем добавить информацию о цене. Для этого мы создадим два отдельных текстовых поля. Для каждого будет свой стиль.
Для первого текстового поля применим следующие настройки:
Шрифт
(Font): Helvetica Neue
Размер
(Size): 19 px
Стиль
(Style): Bold
Сглаживание
(Anti-aliasing): Crisp Чёткое
Цвет
(Color): #FFFFFF
Для второго текстового поля используем такие настройки:
Шаг 9.
Перейдём к нижней части нашей страницы, где нам необходимо создать разделитель. Для этого мы воспользуемся той же техникой, с помощью которой делали разделитель на кнопке загрузки.
Для этого выберите инструмент Линия
(Line Tool) и зажав клавишу Shift, проведём линию от левой направляющей до правой, затем изменим цвет линии на "000000" (черный).
Изменените непрозрачность этой линии до 80%, дублируйте этот слой, выбрав меню Слои - Создать дубликат слоя (Layer> Duplicate Layer) и нажмите кнопку ОК. Измените цвет этой линии на # FFFFFF" (белый) и изменить непрозрачность слоя со второй линией до 10%. Затем переместите белую линию на 1px вниз от чёрной линии.
Шаг 10. В разделе ниже разделителя строк, который мы только что создали, добавим два столбца для скриншотов и функций. Начнём со скриншотов. Выберите какой-нибудь скриншот с айфона и вставьте его, подгоните размер и расположите вблизи левой направляющей.
Выберите этот слой в панели слоев и нажмите дважды кнопку "Добавить маску", чтобы добавить векторную маску. Теперь выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), измените радиус углов до 6px и создайте прямоугольник с размером 175x120px.
В стилях слоя добавьте прямоугольнику Обводку (Stroke), настройки на скриншоте.
Повторите эти шаги для всех ваших скриншотов и задайте им расстояние между собой 35px
Шаг 11. Нарисуем разделитель для созданных скриншотов. Проведём линию в 1 пикс. от верхнего скриншота к самому нижнему и расположим этот разделитель правее от них примерно на 55 пикс. Измените цвет линии на "FFFFFF" (белый) и установите непрозрачность до 5%.
Шаг 12.
Теперь добавим текст с информацией. Позиция текста 55 пикселей от левой линии разделителя. Для текста используем следующие настройки:
Шрифт
(Font): Helvetica Neue
Размер
(Size): 24 px
Стиль
(Style): Regular
Трекинг
(Tracking): -10
Сглаживание
(Anti-aliasing): Crisp Чёткое
Цвет
(Color): #FFFFFF
Теперь давайте создадим список наших возможностей и поместим его под заголовком. Создайте текстовое поле и добавьте пять или шесть строчек и задайте им следующие настройки:
Шрифт
(Font): Helvetica Neue
Размер
(Size): 15 px
Стиль
(Style): Regular
Интерлиньяж
(Leading): 28 px
Трекинг
(Tracking): -10
Сглаживание
(Anti-aliasing): Sharp Резкое
Цвет
(Color): #8d8c90
Повторите вышеуказанные действия, чтобы добавить ещё один текстовый блок с требованиями для приложения.
Шаг 13. Чтобы как то выделить список возможностей приложения, можно воспользоваться некоторыми хитростями. Сдвинем этот текстовый блок на 25px правее.
Используйте инструмент Эллипс (Ellipse Tool)с диаметром 9 пикс. и нарисуйте кружок цветом "bce086".
Добавить следующие стили слоя для этого круга:
Шаг 14. Дублируйте эти кружки в меню Слой - Создать дубликат слоя (Layer> Duplicate Layer) и разместите как на скриншоте ниже.
Шаг 15. Создайте ещё один разделитель, используя технику, которую мы применяли ранее.
Шаг 16.
Теперь мы должны добавить некоторые полезные ссылки на нижней части. Сначала мы создадим четыре текстовых поля, бок о бок, которые будет содержать эти ссылки.
Начните с создания текстового поля, которое размером около 160x40px. Добавить в него текст и повторите 3 раза.
Вот пример текста, который вы можете использовать:
Вставка 1
: Следуйте @ MyCompany на Twitter для новостей и обновлений.
Вставка 2
: Для получения справки и поддержки.
Вставка 3
: Информацию о продукте.
Вставка 4
: Copyright 2011 "Моя компания", ООО.
Используйте такие настройки для текста:
Шрифт
(Font): Helvetica Neue
Размер
(Size): 12 px
Стиль
(Style): Regular
Интерлиньяж
(Leading): 20 px
Сглаживание
(Anti-aliasing): Sharp Резкое
Цвет
(Color): #5555552
Вы должно быть заметили, что текстовые блоки не выровнены, не беспокойтесь, этим мы займёмся в следующем шаге.
Шаг 17.
Чтобы исправить нашу проблему с выравниванием, мы поместим текстовые блоки в группу под названием "Footer".
Во-первых, положение первого текстового поля 55 пикселей от левой направляющей, а последнее поле коснулось правой направляющей.
Теперь выделите четыре текстовых слоя в папке "Footer" , активируйте инструмент Перемещение (Move Tool) и нажмите кнопку Выравнивание центров по вертикали (Align vertical centers), а затем нажмите кнопку Выравнивание центров по горизонтали (Distribute horizontal centers).
Шаг 18. Теперь мы можем добавить некоторые пользовательские иконки, чтобы обозначить наши ссылки. Выберите инструмент Эллипс (Ellipse Tool (U) и создайте круг, 36px в диаметре, поместите его рядом с первым текстовым полем. Изменение цвет этого круга на "FFFFFF" (белый). Теперь выберите Слой - Растрировать слой (Layer- Rasterize Layer).
Добавим на созданный круг значок Твиттера, который можно взять
