Делаем в Фотошоп макет сайта мобильного приложения. В фотошопе макет


Cоздание макета сайта без специфичных навыков в Photoshop

ОглавлениеСоздание макетов сайтов: развлечение для избранных ->Разработка макета сайта: этапы ->Способ №1. Нарезка макета из шаблона сайта ->Способ №2. Создание макета сайта в почтифотошопе ->Способ №3. Онлайн-инструмент для создания макетов ->

Для начала задумайтесь над тем, почему вы решили создать макет сайта самостоятельно. Эта работа требует разносторонних знаний от человека в области ИТ и дизайна, аналитического и творческого мышления одновременно. А еще некой части вашего времени. Окей, есть 4 причины того, почему вам могло это понадобиться. Если у вас другая – пишите в комментарии, дополню.

Причина #1. Интерес к разработке макетов сайта

Ваши интересы очень специфичны? Мы здесь никого не осуждаем. Самим же стало когда-то интересно, и начали этим заниматься! К тому же, тяга к познанию – наша отличительная черта. Хвалю ваше любопытство.

Причина #2. Разработка макета сайта как вид заработка

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

Кстати, работа веб-дизайнера – это не шутки. Вот здесь ниже я просто оставлю график зарплат в зависимости от стажа (по данным DOU за май-июнь 2016). Ни на что не намекаю. Просто скрытый хантинг.

диаграмма зависимость зарплаты веб-дизайнера от стажа

Причина #3. Составление ТЗ на разработку макета сайта для дизайнера

Часто перед недизайнерами стоит необходимость показать макет веб-сайта – иногда просто для иллюстрации своей идеи, но иногда и для подкрепления ТЗ. Конечно, это не обязательно и грамотный дизайнер сам поймет вашу идею и даже сделает лучше, чем вы ожидаете. Однако если вы точно знаете, чего хотите, лучше это показать, а не рассказывать.

В KOLORO можете заказать макет сайта, и вы получите именно то, что ожидаете. Как это у нас получится? Мы тонкие психологи.

Причина #4. Вам срочно надо нарисовать макет сайта, а вы даже не знаете что это

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

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

Этап 1: структура макета сайта

Обязательно заранее спланируйте архитектуру сайта – что и куда будет вести и как будут взаимосвязаны элементы. Можете сделать это в голове, на бумаге или воспользуйтесь MindMap для построения структуры. Построение MindMap при проектировании сайта поможет вам определиться с количеством страниц, которые необходимо нарисовать. Вы будете иметь детальное представление о проекте в целом. Как это сделать? Можете использовать онлайн-инструменты MindMup или Bubblus.

внешний вид mindmup & bubblus

Удобно также пользоваться приложением Coggle, которое вы можете подключить к Google Drive.

как подключить coggle

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

пример внешнего вида карты сайта

На первом этапе проектирования макета создается mind-map сайта

Этап 2: Создание прототипа сайта

Далее можно сразу начать рисовать макет сайта в фотошопе, но, даже если делать макет из праздного любопытства, сначала следует нарисовать прототип сайта. При пошаговой разработке, протототипирование – неотъемлемый этап, который укрепляет психическое здоровье веб-дизайнера. При создании прототипа намечаются ключевые блоки будущего сайта (шапка, слайдер, кнопки, контакты, структура материала и пр.). Это позволяет существенно сэкономить время на этапе отрисовки макета т.к. можно будет увидеть примерный результат и безболезненно внести изменения.

Пример структуры сайта: вот.

Устали? Сделайте жизнь проще и закажите разработку сайта в KOLORO. Мы учтем ваши пожелания и вы получите именно то, что хотели.

Создание прототипа сайта онлайн

Обычно я пользуюсь двумя наиболее популярными онлайн-инструментами для создания прототипа сайта: Moqups и Mockflow. В обоих случаях есть возможность создавать прототипы бесплатно, но с ограниченным функционалом. Тарифы для первого сайта начинаются от $13/мес. (10 проектов, 1 Гб), а для второго – от $14/мес. (неограниченное количество проектов + 25 Гб в облаке). Еще все рекомендуют Mockingbird. И я порекомендую, но только из уважения к Eminem, потому что здесь 3 проекта обойдутся уже в $12/мес., а бесплатных инструментов меньше.

Теперь о личном впечатлении. Moqupsудобнее и интуитивно понятен даже с первого посещения. Здесь много готовых блоков и иконок – как раз то, что нужно, чтобы быстро пройти этап прототипирования. Кроме того, элементы удобно центрировать относительно середины страницы или других элементов. Немного мешает ограничение в 300 объектов для страницы в бесплатном режиме – для макета одностраничного сайта может быть маловато. Есть возможность вставлять элементы с воркфрейма Bootstrap. Mockflow позволяет делать чуть меньше, и с ним нужно пару минут разобраться и привыкнуть к нему, однако большее количество пространства на диске может кого-то привлечь.

пример того как выглядит макет сайта в moqupsпример того как выглядит макет сайта в Mockflow

Прототипы сайта в Moqups и Mockflow

Как запрототипировать будущий сайт?

Рассмотрим на примере Moqups как можно создать прототип страницы с текстом для блога.

Шаг 1. Добавляем шапку (текст можно изменить).

шаг 1 в создании прототипа с Moqups

Шаг 2. Добавляем блок для картинки и надпись (заголовок статьи). С помощью стилей можно удобно менять размер, шрифт и прочее форматирование текста.

шаг 2 в создании прототипа с Moqups

Шаг 3. Добавляем текст и задаем ширину колонки. Все блоки удобно центрируются относительно середины страницы.

шаг 3 в создании прототипа с Moqups

Шаг 4. Текст надо бы разбить картинкой. Да и ширина колонки слишком большая, 500 рх будет лучше. К счастью, можно ее быстро поменять. Большой плюс: выделенные элементы уменьшаются относительно друг друга и мой блок с картинкой тоже уменьшился.

шаг 4 в создании прототипа с Moqups

Шаг 5. Добавим сайдбар (боковую колонку), здесь уже будет просто. Разместим поле для поиска и блок для подписки на рассылку (с привлекательной картинкой и яркой кнопкой).

шаг 5 в создании прототипа с Moqups

Шаг 6. Допустим, наша статья получилась такой маленькой. Еще можно добавить опрос и рейтинг статьи. Получился аккуратный прототип странички для блога. Добавляйте другие элементы по своему вкусу.

шаг 6 в создании прототипа с Moqups

Создание прототипа позволяет увидеть масштабы страницы и принять решения относительно тех или иных блоков. Кстати, с помощью этих инструментов можно делать прототипы для разных девайсов. Например, если постараться, получится что-то подобное. Однако обычно прототип ограничивается ч/б исполнением.

пример создании прототипа с Moqups

Прототип приложения для смартфона

Этап 3: Делаем красивый макет сайта: выбираем цвет

От удачного выбора цветов зависит восприятие сайта и бренда пользователями. Не советую полагаться на свои силы – подбор удачного оттенка может занять часы. Поэтому рекомендую использовать готовые палитры цветов для веба. У Google недавно вышел подробный гайд по удачным цветам для материального дизайна (тренд веб-дизайна). Эти цвета гармонично сочетаются, и вы можете быть уверены в их привлекательности. С помощью Materialpalette можно удачно подобрать два цвета – основной и акцент, а также посмотреть, как они будут выглядеть в интерфейсе. Немного больше цветов на Material Design Colors.

выбор удачного цвета

Представили сайт? Сделали прототип? Выбрали цвета? Теперь можно перейти к созданию самого макета. Предлагаю вам несколько способов.

Внимание! Здесь не будет советов по тому как сделать макет сайта в фотошопе – это тема для отдельной статьи, здесь более простые способы.

или существующих сайтов

Этот способ подойдет вам, если вы хотите:

  • разобраться в основных инструментах Photoshop;
  • найти разные референсы для своего будущего сайта и собрать их воедино;
  • почувствовать себя дизайнером на пару часов;
  • продемонстрировать веб-дизайнеру или агентству (например, нам :) наиболее подробное видение сайта;
  • подкрепить ТЗ на разработку сайта не только «вот здесь кнопочки призыва, а тут разделитель и лидомагнит».

Плюсы такого подхода к разработке макета:

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

Минусы:

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

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

Как это делается

Самый простой и быстрый способ сделать макет сайта – выбрать шаблон под определенную CMS и переделать его под себя. Поэтому для начала надо определиться с CMS, что значительно упростит разработку сайта. Однако учтите, что дизайн сайта будет ограничиваться теми элементами, которые есть в шаблоне. Конечно, вы сможете поменять цвета, однако отдельные элементы интерфейса уже готовые и их изменить вы не сможете.

! Если вы будете делать «рагу» из разных сайтов, не забывайте где-то в блокнотике карандашиком писать исходники. Это упростит дальнейшую разработку дизайна и верстку макета.

Макеты сайтов под Wordpress

Наиболее популярная CMS - это Wordpress. Например, здесь вы найдете много современных шаблонов для этой CMS. Зачем? Сайт на шаблоне ускоряет запуск проекта в разы, однако он не будет уникальным. Хотя, если вы будете использовать оригинальные иллюстрации, изображения и креативный подход – даже шаблонный макет можно переделать до неузнаваемости. Главным преимуществом является то, что ваш сайт гарантированно будет адаптивным и вообще красавцем в плане отображения на разных устройствах.

Просмотрите разные шаблоны и выберите такой, какой вам больше всего по вкусу. Я еще немного поискала на Envato Market и нашла шаблон Dalton, который мне понравился больше всего. Зайдя на демонстрационную версию шаблона, вы сразу увидите концепт корпоративного сайта. Нажав на меню, вы сможете посмотреть более подробно, какие функции есть у шаблона, как будут выглядеть разные страницы. Лучше всего уделить этому полчаса и как следует разобраться в том, что есть в шаблоне.

пример шаблона сайта

Что дальше? Подбираем размер макета сайта, режем и клеим

Когда вы уже освоились в шаблоне, можно приступать к его нарезке. Отлично, если разрешение вашего экрана 1920 рх или больше – это позволит просто делать скриншоты частей сайта и соединять их в редакторе. Работа с макетом начинается с шапки (header), далее – разные блоки (body), в конце – подвал (footer).

Вам понадобится:
  • удобный инструмент для снимка выбранной области (screen capture tool), я использую Lightshot – он предлагает сохранить изображение в отдельный файл или копирует его в буфер обмена;
  • Photoshop – для склеивания нарезанных частей изображений.

Этапы создания макета для сайта на основе шаблона

Шаг 1. Выбираем ширину макета сайта

Решите, какую страницу вы будете делать первой. Не начинайте с главной – ее лучше оставить напоследок, т.к. это наиболее важная страница сайта и сначала лучше немного набить руку. В примере я буду делать страницу «О нас» - здесь будет интересная информация о компании и ее сотрудниках. У меня уже есть прототип сайта, поэтому я знаю, что делаю. Кстати, как там ваш прототип?

Откройте Photoshop и задайте ширину макета сайта 1920 рх. Этого будет достаточно для того, чтобы увидеть, как сайт будет выглядеть в браузере. Если у вас разрешение меньше – ставьте такую ширину, которую позволяет монитор. Насчет высоты пока не беспокойтесь – здесь сложно угадать и все равно придется растягивать/сужать область.

задаем ширину макета сайта

Шаг 2 . Продолжаем создание макета сайта в Photoshop

Подберите в шаблоне такую шапку, которая вам нравится. Вырежьте ее с помощью удобного инструмента, откройте документ в Photoshop и вставьте туда (Ctrl+V). С помощью инструмента перемещения (V) поместите шапку вверху. Мне нравится шапка с topbar, где есть контактная информация о компании.

Шаг 2.А. Делайте сразу правильный макет сайта

Теперь у вас есть два пути – изменять текст в изображении или писать сопутствующий текст в текстовом файле. Что удобнее? Все зависит от ваших целей. На личном опыте могу сказать, что лучше это сделать в макете, сразу подобрав шрифт и размеры. Так безопаснее и будет WYSIWYG в действии (What You See Is What You Get, «что видишь, то и получишь»).

Шаг 3. Идем к успеху

Наполняйте свой макет разными блоками и редактируйте их согласно своим нуждам. На данном этапе можно не играться с цветами, если у вас нет навыков использования Photoshop. Для того чтобы увеличить высоту макета, используйте инструмент «Рамка» (С).

Что получилось

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

Спустя пару минут размышлений, нарезки и склеивания наиболее понравившихся кусков, у меня получился структурированный макет страницы «О нас»

О чем не стоит забывать

  1. Называйте каждый слой с блоком адекватно, согласно тому, что там есть. Иначе потом совсем потеряетесь.
  2. При подборе шрифта надо выбрать разный размер для заголовков и основного текста. При этом лучше руководствоваться библиотекой веб-шрифтов Google Fonts. Не забудьте отфильтровать кириллические шрифты.

выбор шрифта для макета

Вам подойдет способ №2, если:

  • у вас нет Photoshop (совесть не позволяет или нет места на диске) или вы еще не научились им пользоваться;
  • вы хотите познакомиться с HTML кодом и CSS стилями без вмешательства в разметку;
  • вам нужен интерактивный макет сайта.

Советую шикарный бесплатный инструмент для создания макетов Macaw. Для работы с программой ее надо скачать и установить – дело пары минут. В программе можно в визуальном режиме практически верстать макет, потому что вы сразу сможете опубликовать его и увидеть HTML-код и CSS. Немного подробнее о работе программы. У Macaw есть существенный недостаток – она создает неадаптивную веб-страницу. Как с этим бороться? Здесь уже понадобятся навыки верстальщика, чтобы подключить фреймворк (например, если делать макет сайта под Bootstrap). Однако если нужно просто показать работающий макет коллегам – Macaw отлично подойдет.

как выглядит неадаптивный шаблон сайта

Так выглядит неадаптивный шаблон на разных устройствах. Хочется плакать

Для начала работы запустите программу у себя на компьютере. Вашему вниманию представляется пустой документ с шириной страницы 1200 рх с сеткой макета сайта. По умолчанию между столбцами есть отступ (padding), поэтому между созданными элементами будет расстояние. Рисовать вам придется только в пределах колонок, потому что если вы выйдете за них, блоки будут отображаться друг под другом. Так что следите за ними.

Вы можете самостоятельно задавать ширину столбцов, их количество и расстояние между ними. Если вы хотите, чтобы элементы «прилипали» друг к другу, задайте 100% ширину колонки и уберите между ними отступ. Зачем вам эта сетка? При HTML верстке макета сайта будет проще сделать адаптивный шаблон, т.к. современные фреймворки используют именно 12-столбиковую сетку.

сетка редактора

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

Что дальше? Макетируем

Настройте рабочую область так, как вам удобно и приступаем к работе. Я буду создавать такую же страницу, которую вырезала из шаблона Dalton.

Шаг 1.

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

начало работы с редактором по созданию макета

Внутри другого контейнера будет логотип, а внутри следующего – меню. Для отдельных элементов меню не нужно создавать отдельные блоки, достаточно установить приемлемое расстояние между словами (word spacing).

работа с редактором шаг 1

Шаг 2

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

шаг 3 в работе с визуальным редактором

Шаг 3. Создание интерактивного макета сайта

Продолжаю перетаскивать блоки и вставлять в них текст. Кнопку создаю при помощи специального инструмента «Кнопка» (логика!). Macaw позволяет создавать интерактивный макет с разными состояниями кнопок и возможностью переключения между страницами.

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

особенности работы с редактором макета

Если нажать File -> Publish, вы получите готовую страничку, у которой можно будет просмотреть HTML-код и CSS в разных вкладках. Это очень удобно, если вы хотите увидеть, как выглядит разметка.

Что получилось

Получилось как-то так. Здесь для сравнения, слева склеенные куски отредактированного шаблона, справа – макет, созданный в Macaw. Большой плюс программы – вы можете вставлять кнопки, добавлять им ссылки, создавать разные страницы и переходить между ними. Только не забывайте об иерархии контейнеров и не потеряйтесь в них.

сравнение шаблона и самого макета

Особенности такого способа создания макета сайта:

  • чтобы понять тонкости работы программы, надо потратить дополнительное время;
  • даже когда уже вник в программу, все еще иногда не понятно, почему она ведет себя так, а не иначе;
  • об адаптивности можно забыть, если не доделывать самому;
  • действительно удобно создавать макет и даже немного разобраться в верстке – можно увидеть, как взаимодействуют элементы и вообще какая структура;
  • в стилях могут появляться такие вещи «width: 16.6666666666%», которые надо будет исправлять; просто необходимо понимать, что здесь WYSIWG, а не больше.

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

Удобный инструмент для создания инфографики, которым я пользуюсь уже давно – сервис Creately. Здесь есть десятки и сотни компонентов для создания UI дизайна под разные устройства (больше под мобильные). Вам точно понравится, покажу некоторые из них.

функционал инструмента creately

Еще здесь удобно редактировать элементы, добавлять текст (и даже делать кнопки со ссылками!). В общем, всего за пару минут у меня уже получилось то же самое, что и в Macaw, только аккуратнее. Однако такой макет не сделать сильно интерактивным. К этому способу не будет шагов т.к. сервис хорошо интуитивно понятен. На скрине я постаралась максимально отобразить возможности сервиса.

работа с инструметом по созданию макетов сайта creately

Возможности сервиса Creately

В Creately мне нравится, что:

  • можно выделить несколько объектов, распределить и выровнять их относительно друг друга;
  • для того чтобы поделиться макетом с другом, можно экспортировать изображение в любом удобном формате;
  • есть готовые элементы пользовательского интерфейса (например, браузер), что позволяет лучше понять проект.

На этом все. Это были те способы, к которым я пришла на том или ином этапе творческого развития. Если вы нашли пользу в этом материале – мы счастливы.

P.S. Данная статья является ознакомительной и не позволит вам стать веб-дизайнером. За серьезными знаниями придется еще много покопаться в интернетах.

koloro.ua

Макет сайта в Фотошоп

В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!

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

Материалы для урока:

960 Grid

Набор иконок Aquaticus Social

Архив

Создание нового документа

Мы будем использовать систему 960 Grid. Качаем, открываем файл 960_grid_12_col.psd.

Работа над фоном

Давайте начнем работу с фона. Жмем G, в открывшемся редакторе градиента устанавливаем цвета – с #dcdcdc до #ffffff:

Теперь проводим линию градиента снизу вверх, как показано на рисунке:

У вас должно получиться что-то такое:

Работа над шапкой

Прежде чем мы начнем работу над фоном, мы должны определить верхнюю границу нашего макета. Жмём View > New Guide (Просмотр > Новая направляющая) и выставляем настройки, как показано ниже:

Теперь перейдем к лого; нам нужно создать выделение 280 на 40 пикселей, как показано ниже. Я использовал Polygonal Lasso Tool (Прямолинейное Лассо).

Теперь жмём Shift+Backspace, чтобы залить выделение белым цветом.

Наложим на наш прямоугольник стиль слоя Наложение градиента. Установите цвета, как показано ниже:

Теперь напишите ваше имя со следующими настройками:Шрифт: RockwellРазмер: 46pxТип: ОбычныйЦвет: #1e1e1c

Создаем еще одно выделение 270 на 40, должно получиться как-то так:

Залейте выделение, наложите сверху такой же градиент, а также создайте тень, используя следующие настройки:

Используя те же настройки текста, только изменив размер на 33 пикселя, создадим подзаголовок:

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

Работа над навигацией

Мы начнём с создания небольшого прямоугольника – создадим его, используя Rounded Rectangle Tool (Прямоугольник со скругленными углами) радиусом 5 пикселей. Прямоугольник должен быть размером 65 на 30 пикселей.

Далее установим для слоя стили Обводка, Наложение градиента, Внутренняя тень:

Не забудьте добавить самое главное – текст. Я использовал цвета #ffffff и #1e1e1c.

Выделяем слой с текстом и слой с прямоугольником в списке слоёв.

И прежде чем двигаться далее, сгруппируйте их (Ctrl+G).

Добавление текста

Создаём две новые линеечки на расстоянии 50 пикселей, как показано на рисунке:

Для текста используем следующие настройки:Шрифт: RockwellРазмер: 30pxТип: ОбычныйЦвет:  #e8204e – #676666

Добавляем ещё линейку:

Добавление картинок

Создаём выделение 250 на 150 пикселей и размещаем так, как показано на рисунке, ориентируясь на вертикальную и горизонтальную разметки:

Залейте выделение любым цветом, назовите новый слой удобным для вас именем и примените стиль Обводка для нового слоя:

Давайте добавим изображение. Для этого используйте File > Place (Файл > Поместить).

Убедитесь, что слой с добавленным вами изображением находится поверх слоя с рамочкой в списке слоёв.

Теперь кликаем по слою правой кнопкой мыши и жмём  Create Clipping Mask (Создать слой-маску).

Самое время создать тень! С помощью Elliptical Marquee Tool (Овальная область) создаем выделение овала, как показано ниже, и заливаем выделение цветом #1e1e1c.

Теперь применяем фильтр Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) с радиусом 2 пикселя.

Копируем слои и создаем такую же иллюстрацию в правой части макета.

Центральное изображение сделаем больше – 340 на 200 пикселей, и размещаем так:

Повторяем предыдущие шаги. Должно получиться что-то вроде этого:

Не забывайте группировать слои!

Добавление стрелок для слайдера

Используя Custom Shape Tool (Произвольная фигура), создаём стрелку цветом #e8204e.

Устанавливаем стили Внутренняя тень, Обводка:

Размещаем в точности так, как на рисунке:

Дублируем стрелку и размещаем дубликат в правой части макета:

Добавление контента

Снова добавляем пару линеек, отступая по 50 пикселей:

Добавляем нужный текст, используя показанные ниже настройки:

Добавляем ещё две линейки:

Добавляем текст:

И ещё одну линейку, ориентируясь на картинку ниже:

Используя RoundedRectangleTool (Прямоугольник со скругленными углами), создаём фигуру радиусом 5 пикселей и размером 100 на 30. Применяем стили Внутренняя тень, Тиснение/Скос, Глянец, Наложение градиента:

Внутри кружочек со стрелкой:

Цветом #3e3e3e пишем необходимый текст внутри и применяем к нему стиль Тень:

Рисуем разделитель - две полоски, как показано ниже:

Размещаем так:

Пишем заголовок.

С помощью Ellipse Tool (Эллипс) создаем кружок 20 на 20 и применяем к нему стили Внутренняя тень, Обводка:

С помощью CustomShapeTool(Произвольная фигура) размещаем галочку внутри:

Добавим тень! Создаем овальное выделение ниже, заливаем его чёрным цветом и применяем Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу)с радиусом 2 пикселя.

Добавляем текст:

И копируем пару раз наши пункты:

Организовываем все слои по группам – слои каждого пункта в отдельную:

Работа над нижней частью контента

Начинаем, как всегда, с новой линейки, отступая 50 пикселей:

Создаем ещё один заголовок, и снова линеечки:

Ещё одну линейку, как показано ниже:

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

Дублируем:

Создадим разделитель – 2 горизонтальные полоски:

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

Смотрите, как это работает! :)

Повторяем предыдущие шаги, чтобы получить что-то вроде этого:

Добавление иконок

Теперь добавим иконки социальных сетей и подписи к ним. Вы можете скачать набор иконок Aquaticus Social, сделанный Junwei.

Поместите иконку и текст относительно разметки так, как показано ниже:

Продублируйте:

Работа над футером

Создаём последнюю линейку в разметке:

Снова делаем разделитель:

Размещаем разделитель так, как показано ниже:

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

И последний штрих – копирайты:

И готово!

Вы можете скачать .PSDздесь.

Автор: Mkhaled

photoshop-master.ru

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

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

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

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

Шаг 1

Создайте новый документ. Установите размеры Ширина (Width) 980, Высота (Height) 1200 пикселей.

Шаг 2

Возьмите изображение воды с пузырьками из дополнительных материалов и поместите его в ваш документ. Возьмите инструмент «Прямоугольная область» (rectangular marquee tool (М)), выделите прямоугольник, как на скриншоте ниже, и нажмите клавишу DELETE, это позволит избавиться от фирменного водяного знака внизу изображения.

Шаг 3

Далее, создайте новый слой, нажав сочетание клавиш CTRL + SHIFT + N. Затем, вновь возьмите инструмент «Прямоугольная область» (rectangular marquee tool (М)), и с помощью него выделите область высотой 50 пикселей от верхней границы вашего документа. Залейте выделенную область черным цветом (#000000) и установите значение Непрозрачность (Opacity) 58%. Это будет "шапка" нашего сайта (хедер).

Шаг 4

В самом верху нашей шапки, мы должны повторить процедуру из предыдущего шага, т.е. выделить область таким же образом, но только меньшей высоты, также залить ее черным цветом, а значение Непрозрачности (Opacity) поставить 42%. Должно получиться, как на скриншоте ниже. Да, и не забываем все это делать на отдельных слоях!

Шаг 5

На этом шаге нам нужно отчертить нижнюю границу нашего хедера. Для этого возьмите инструмент «Область (горизонтальная строка)» (Single Row Marquee Tool (M)) и выделите область на нижней границе нашей "шапки" сайта. Залейте ее белым цветом (#FFFFFF) и установите значение Непрозрачность (Opacity) 24%.

Шаг 6

После этого, мы добавим логотип и навигационное меню в наш хедер. В качестве логотипа используем просто текст. Для него возьмите шрифт League Gothic, размер 40 пунктов, а для навигации возьмите шрифт Arial Bold, размер 13 пунктов. Цвет и для логотипа, и для меню используйте белый (#FFFFFF).

Шаг 7

Далее, поместите заранее подготовленное изображение айфона в наш документ. Затем, с помощью инструмента «Прямоугольная область» (rectangular marquee tool(М)) нарисуйте экран айфона, и залейте его белым цветом (#FFFFFF).

Шаг 8

Теперь, перенесите изображение обоев в стиле Win7 в ваш документ. Убедитесь, что данный слой находится над слоем с экраном, нарисованным в прошлом шаге. Кликните правой клавишей мышки по слою с обоями, и выберите во всплывающем меню пункт Создать обтравочную маску (Create Clipping Mask). Отрегулируйте расположение данного изображения, чтобы оно корректно отображалось на экране нашего смартфона.

Шаг 9

Вот так выглядит экран нашего айфона с логотипом. Для текста мы использовали шрифт League Gothic, размер 21 пункт, а изображение капель мы взяли из набора заказных фигур из дополнительных материалов.

Шаг 10

Теперь, добавим текстовый блок рядом с изображением девайса. Для создания текста возьмите шрифт Arial Regular, размер 13 пунктов. Заголовок оформите шрифтом League Gothic, размер 39 пунктов. Также добавьте изображение кнопки AppStore из дополнительных материалов. Перед, тем как установить кнопку, ее необходимо вырезать из общего файла.

Шаг 11

Возьмите инструмент «Прямоугольная область» (rectangular marquee tool (М)) и выделите нижнюю часть вашего холста. Для этого предварительно создайте новый слой.

Шаг 12

Далее, мы зальем эту выделенную область не просто сплошным цветом, а применим к ней градиент с помощью стиля слоя (layer style). Параметры для Наложения градиента (Gradient Overlay) должны быть следующие:

  • Цвета градиента от #ffffff k #eeecec

  • Режим наложения (Blend mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Стиль (Style): Линейный (Linear)
  • Угол (Angle): 90
  • Масштаб (Scale): 100%

Шаг 13

После этого добавляем иконки и текст. Иконки берем из дополнительных материалов.

Заголовки для текстовых блоков выполняем с помощью шрифта Arial Bold, размер 19 пунктов. Контентная часть выполняется с помощью шрифта Arial Regular, размер 13 пунктов, цвет для обеих частей - #3f3f3f.

Шаг 14

Что касается оформления блока с твитами, то здесь было решено применить шрифт Georgia Italic, размером 16 пунктов, цвет #7f7f7f, логотип твиттера в виде птички берем из дополнительных материалов. Цвет ссылки #1161a9.

Далее, с помощью инструмента «Прямоугольная область» (rectangular marquee tool (М)) выделяем область для футера и заливаем ее цветом #ebeaea.

Шаг 15

Теперь, при помощи инструмента «Область (горизонтальная строка)» (Single Row Marquee Tool (M)) отрисуем верхнюю границу нашего футера и зальем ее цветом #bcbbbb, непрозрачность (Opacity) понижаем до 40%.

Шаг 16

В левую часть футера добавляем текстовый логотип, в правую часть добавляем навигационное меню. Для этого применяем шрифт Arial Regular, цвет #555555. И логотип, и навигацию прописываем в верхнем регистре.

И вот, наш макет готов!

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

Автор: sanjay

photoshop-master.ru

Как сделать фотокнигу в фотошопе. Слои в макете

 

 

Как сделать фотокнигу в фотошопе

Слои в макете

Приветствую Вас, дорогие друзья!

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

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

Итак, часть вторая: «Как сделать фотокнигу в фотошопе». Слои в макете.

Начнем опять же с ОБЛОЖКИ. Откроем наш макет в программе.

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

Послойная структура нашего PSD файла выглядит следующим образом:

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

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

Над слоем «Обложка», нажатием левой кнопки мышки (ЛКМ) на вторую справа пиктограмму внизу палитры слоев, добавляем новый слой и присваиваем ему имя «Оборотная сторона».

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

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

Давайте, чтобы у нас было все правильно и по порядку, перетащим этот слой в самый низ, а слой «Обложка» переименуем в «Лицевая сторона».

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

Далее с помощью инструмента «Прямоугольная область» выделяем правую часть макета вплоть до направляющей.

Заливаем ее черным цветом и, нажав комбинацию клавиш «Ctrl+D» снимаем выделение.

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

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

Над слоем «Лицевая сторона» создаем еще один новый слой.

Обращаемся к инструменту «Горизонтальный текст».

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

Наводим маркер на лицевую (правую) часть макета и набираем название книги и/или необходимый текст. Слой преобразуется в текстовый.

Для придания тексту оригинального стиля, дважды щелкаем ЛКМ по полю текстового слоя и попадаем в окно «Стиль слоя». Здесь можно оформить отображение текста.

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

Опускаемся на слой «Оборотная сторона», активируем его, щелкнув по нему ЛКМ. А далее все как описано выше: создаем новый слой, выбираем инструмент «Текст» и на левой части обложки набираем необходимый текст.

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

И в итоге получаем полноценный шаблон ОБЛОЖКИ для нашей фотокниги.

И к нему послойную структуру:

 

Если с обложкой все более или менее просто, то РАЗВОРОТ дает нам огромное пространство для творческой деятельности!

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

Откроем макет разворота в программе.

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

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

Как же для удобной работы правильно организовать слои?

Изображение или текстура используемые в качестве фона, как и в случае с обложкой размещаются непосредственно на слое «Разворот». Текст, картинки и другие разные элементы помещаются на страницу с помощью создания новых слоев, причем для каждого элемента свой. Не забывайте только, что слой «Обрезка» всегда должен находиться на самом верху для контроля безопасной зоны размещения значимых частей изображения или текста.

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

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

Давайте посмотрим, как это выглядит в реальности.

Находясь на слое «Разворот» щелкаем ЛКМ по значку «Создать новый слой». Получаем пустой слой, присвоим ему нумерацию – «1».

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

Используя инструмент «Прямоугольная область» выделяем участок и заливаем черным цветом.

Снимаем выделение – Ctrl+D и для того чтобы задать стандартный размер в соотношении 2:3 вызываем режим свободного трансформирования, нажав комбинацию клавиш «Ctrl+T». В окошках Ширина и Высота панели параметров инструмента вводим необходимые размеры. Для подтверждения нажимаем галочку справа на панели или клавишу «Enter».

Это и есть маска для первого снимка – окошко, в котором будет расположена наша первая фотография.

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

На панели, к слою прикрепляется отличительной знак в виде направленной вниз угловой стрелки.

Подобным образом организуем попарно слои для последующих снимков.

В итоге разворот принимает следующий вид:

Для организации и выравнивания масок в документе можно использовать направляющие, которые располагаем самостоятельно (вручную) или с помощью создания макета направляющих. Как это сделать, подробно описано в первой части материала. Здесь просто укажу путь к созданию макета направляющих – меню «Просмотр» > «Новый макет направляющей».

Для размеров по длинной и короткой стороне документа можно найти общее кратное число, потом разделив ширину и высоту на него получить количество строк и столбцов. К примеру, для нашего макета кратным будет число 30. Делим 300 и 600 на 30, получаем 10 строк и 20 столбцов. Заносим эти данные в таблицу.

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

Для перемещения маски достаточно щелкнуть по ней ЛКМ и с зажатой левой кнопкой мышки, используя инструмент «Перемещение» поместить ее в необходимое место. С текстом можно поступить аналогично. Не забывайте про обрезные области и центр рабочей области.

Как уже говорилось кроме простых масок можно использовать художественные маски – векторные черно белые картинки.

А так же маски можно заключать в рамки, как в самые простые, так и более сложные.

В итоге мы получаем полноценный шаблон РАЗВОРОТА для нашей фотокниги.

И к нему послойную структуру:

Теперь я надеюсь, вам понятен принцип организации слоев для создания шаблонов обложки и разворотов фотокниги.

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

Приятных творческих успехов!

 

 

 

Если Вы не хотите пропустить интересные уроки по обработке фотографий - подпишитесь на рассылку.Форма для подписки находится ниже.

www.photoshopsunduchok.ru

Создаём простой макет для сайта в Фотошоп

В этом уроке мы создадим текстурированный макет сайта, используя относительно небольшое количество изображений. Это проще, чем вы думаете. Вы быстро освоите эту «науку». Для пользователей среднего уровня владения Photoshop работа займет меньше часа, а по ходу дела вы узнаете несколько профессиональных секретов. Давайте приступим.

Вот, что должно у нас получиться:

Материалы для урока:

Текстура 1

Текстура 2

Архив

В этом уроке мы используем несколько готовых изображений. Давайте начнем с создания нового документа:

Теперь нам понадобится текстура дерева, ссылку на которую я давал выше. Открываем «texture-small.jpg» и жмём Edit – Define Pattern (Редактирование – Определить узор). Даём текстуре название, после чего текстуру можно закрыть.

Дублируем фоновый слой. Выделяем его и жмём Layer – Layer Style – Pattern Overlay (Слой – Стиль слоя – Наложение узора). Используем текстуру, которую мы только что создали.

Используя Rectangle Tool (Прямоугольник), создаем вот такие разноцветные прямоугольники вдоль досок текстуры.

Удерживая Ctrl, по очереди кликаем на всех слоях с квадратными формами. Таким образом, мы их выделяем.

Когда все слои будут выделены, жмём Ctrl+E, чтобы объединить их в один. Меняем режим наложения на Color Dodge (Осветление основы), а значение Opacity (Непрозрачность) где-то на 40–50%.

Теперь нам понадобится вторая текстура, ссылку на которую я давал в самом начале – гранжовая текстура, помещаем слой с ней поверх остальных, жмём File – Place (Файл - Поместить) и выделяем текстуру.

Убедитесь, что слой выделен, и добавьте немного тени со следующими настройками:

 

Используйте Rectangular Marquee Tool (Прямоугольная область), чтобы создать выделение, как на иллюстрации:

 

Теперь выделяем слой с текстурой и жмём Ctrl+J, чтобы скопировать выделение на новый слой. Выделяем новый слой и поворачиваем его на 180 градусов, после чего помещаем на верхнюю часть макета. Добавим необходимый текст.

Меняем режим наложения слоя с текстом на Color Burn (Затемнение основы).

Используя ту же технику, нарежьте футер и кнопки меню. Вот так получилось у меня: 

Если вы хотите выделить какую-либо кнопку (например, для hover state), выделите слой с этой кнопкой и зажмите Ctrl+U. Играя с настройками, вы сможете добиться желаемого результата.

Создаем справа белу форму с помощью инструмента Rectangle Tool (Прямоугольник).

Используя инструмент Line Tool (Линия), разлинуем нашу форму. Я использовал цвет #d3d1d2 для линий.

Выделим слой с линиями и слой с формой, после чего зажмем Ctrl+E, чтобы объединить их. С помощью круглой маленькой резинки немного «продырявим» нашу форму, пока она не примет вид настоящего, вырванного из блокнота листочка.

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

Добавим текст. Я использовал шрифт Myriad Pro (вы найдете этот шрифт и на Windows 7 и на Vist’e).

Теперь добавим необходимое изображение в середину макета, а также две стрелочки справа от него. Стрелочки вы можете нарисовать с помощью инструмента Custom Shape Tool (Произвольная фигура).

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

Поместим наш листочек в правый нижний угол нашего макета, как показано на рисунке:

Сделаем несколько дублей листочка и расположим их как-нибудь так:

И последний шаг – помещаем сверху наш цветочек.

А вот и финальный результат!

Автор: Razvan

photoshop-master.ru

Макет игрового сайта в Фотошоп

Итоговый результат:

Исходники:

  1. Фон
  2. Шрифт
  3. Иконки

Архив

Шаг 1. Создание документа и фона.

Создайте новый документ (Ctrl+N) размером 1200х1340px и чёрным (#000000) фоном. Скачайте фон для сайта и скопируйте в документ. Расположите его так, чтобы солнечная вспышка находилась в правом верхнем углу. Добавьте маску слоя к фону, и залейте слой линейным градиентом снизу вверх, у Вас должно получится, примерно, то же, что и на картинке ниже.

Шаг 2. Создание логотипа

Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 10px (Это будет радиус по умолчанию) и создайте прямоугольник 360х105px.

Добавьте прямоугольнику следующие стили: Blending Options (режим наложения), Drop Shadow (Тень), Stroke (Обводка).

У Вас должно будет получиться что-то вроде этого:

Внутри прямоугольника добавьте название сайта и слоган, используя инструмент Текст (Type Tool).(Название сайта напишите шрифтом Virgo 01)

Стили для первого слова в названии сайта: Drop Shadow (Тень), Gradient Overlay (Наложение градиента).

Стили для второго слова: Drop Shadow (Тень), Gradient Overlay (Наложение градиента).

У Вас получится что-то вроде этого:

Шаг 3. Создание навигации.

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и нарисуйте под логотипом прямоугольник.

Добавьте к слою следующие стили: Blending Options (режим наложения), Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Gradient Overlay (Наложение градиента), Stroke (Обводка).

Получится должно что-то вроде этого:

Теперь, Вам нужно будет создать узор. Создайте новый документ (Ctrl+N) 9x9px, выберите инструмент Лупа (Zoom Tool) и максимально приблизьте документ. Возьмите инструмент Карандаш (Pencil Tool) и нарисуйте то же, что и на картинке ниже.

После этого перейдите в Редактирование > Определить узор (Edit > Define Pattern), сохраните свой узор и вернитесь к шаблону. Загрузите выделение для слоя с навигацией.

Совет: Для загрузки выделения зажмите кнопку Ctrl и кликните ЛКМ по иконке слоя в панели слоёв. Теперь возьмите инструмент Заливка (Fill Tool) и выберите свой узор в списке узоров.

На новом слое залейте выделение и установите Непрозрачность (Opacity), примерно, на 7%.

Возьмите инструмент Текст (Type Tool) и добавьте свои пункты меню.

Создайте оранжевый (#d88503) прямоугольник, используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), и поместите его под слой с текстовой навигацией.

Выберите инструмент Овальная область выделения (Elliptical Marquee Tool) и создайте небольшой овал в правой стороне навигации. Залейте овал белым (#FFFFFF) цветом и добавьте размытие по Гауссу, Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Guassian Blur), Радиус - 5px.

Добавьте стиль Внешнее свечение (Outer Glow) используя настройки ниже: Outer Glow (Внешняя тень).

Должно получится что-то вроде этого:

Шаг 4. Создание области контента.

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и создайте 3 прямоугольника.

Для каждого прямоугольника добавьте следующие стили слоя: Blending Options (режим наложения), Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Gradient Overlay (Наложение градиента), Stroke (Обводка).

Получится что-то похожее на это:

Выберите слой со светящимся овалом и дублируйте его (Ctrl+J). Переместите его в правый верхний угол первого прямоугольника.

Шаг 5. Блок "Рекомендуемое".

Блок "Рекомендуемое" будет в виде слайдера. Поместите в левую часть прямоугольника изображение размером 555х250px.

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

Теперь добавьте описание для каждой картинки. И добавьте разделители между слайдами используя дефисы (--).

Теперь добавим описание для большого изображения. Для этого возьмите инструмент Прямоугольная область выделения (Rectangular Marquee Tool) и создайте прямоугольное выделение. Залейте выделение чёрным (#000000) цветом и установите Непрозрачность (Opacity) на 75%.

Внутри получившегося прямоугольника добавьте своё описание.

Шаг 6. Блок со случайными новостями.

Внутри второго блока я решил добавить слайдер со случайным контентом. Слайдер состоит из 3 больших изображений.

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

Добавьте краткое описание под каждым изображением.

Шаг 7. Блок с контентом.

Внутри третьего блока я решил сделать 3 колонки с контентом. Выглядит всё это следующим образом:

Шаг 8. Создание футера.

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и создайте прямоугольник такого же размера, как и навигация.

И добавьте к слою следующие стили: Blending Options (режим наложения), Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Gradient Overlay (Наложение градиента), Stroke (Обводка).

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

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

Итоговый результат:

Автор: photoshop-plus

Переводчик: StoleYourBike

photoshop-master.ru

Создаём в Фотошоп макет сайта с 3D эффектом

В этом уроке Вы узнаете, как создать макет сайта с 3D эффектом, используя простые техники.

Финальный результат:

Для начала создайте новый документ 1100х1177px и залейте фон цветом #333333.

Убедитесь, что выбран фоновый слой, перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте следующие параметры.

С помощью инструмента Прямоугольник (Rectangle Tool) нарисуйте фигуру в центре шаблона используя цвет #7f7f7f.

Затем примените фильтр Шум.

Возьмите инструмент Линия (Line Tool) и добавьте вертикальние линии как показано на скриншоте ниже.

Выделите все слои с вертикальными линиями и нажмите CTRL+E, чтобы объеденить их в один слой. Теперь нужно изменить перспективу у линий, для этого перейдите в меню Редактирование > Трансформирование > Перспектива (Edit > Transform > Perspective).

Инструментом Прямоугольник (Rectangle Tool) создайте шапку сайта.

Я использовал следующие стили слоя, чтобы создать тень под шапкой:

Дублируйте слой с шапкой и примените фильтр Шум (Фильтр > Шум > Добавить шум (Filter > Noise > Add noise).

Инструментом Линия (Line Tool) добавьте линию толщиной 6px.

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

Инструментом Линия (Line Tool) добавьте 1 пиксельную линию, как на скриншоте ниже.

Сейчас мы будем создавать слайд-шоу. Для этого возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус установите на 10px, и создайте фигуру, как на скриншоте ниже.

Затем перейдите в меню Редактирование > Трансформирование > Деформация (Edit > Transform > Warp) и используйте параметры указанные ниже.

Ваше слайд-шоу должно выглядеть теперь примерно так:

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

Возьмите инструмент Эллипс (Ellipse Tool) и создайте фигуру. Трансформируйте эту фигуру так, чтобы получилось что-то вроде этого:

Чтобы сделать из фигуры реалистичную тень, Вам нужно перейти в меню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur).

Затем создайте прямоугольник.

Примените фильтр Шум к этой фигуре и над ней нарисуйте две 1 пиксельных линий. Также, добавьте стиль Тень (Drop shadow).

Инструментом Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) создайте зелёную кнопку.

Под слоем с кнопкой создайте новый слой и инструментом Кисть (Brush tool), белого цвета, добавьте немного бликов.

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

Сейчас мы сделаем тень немного интереснее. Перейдите в меню Редактирование > Трансформирование > Деформация (Edit > Transform > Warp) и используйте следующие параметры:

Теперь, Ваша кнопка должна выглядеть так:

Создайте новый слой и инструментом Кисть (Brush Tool) добавьте блик в центре кнопки.

Инструментом Линия (Line tool) нарисуйте белую линию, как на скриншоте ниже.

Растрируйте слой с линией и инструментом Ластик (Eraser Tool), с мягкими краями, удалите правую и левую часть линии.

Дублируйте кнопку несколько раз и разместите их следующим образом:

Теперь нужно создать фон для контента. Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте фигуру.

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

Инструментом Кисть (Brush Tool ) добавьте блик в левом верхнем углу.

Затем заполните эту область каким-нибудь контентом. Ниже Вы можете увидеть, что получилось у меня.

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

В правой части добавьте социальные иконки.

Инструментом Текст (Type Tool) напишите название сайта и слоган.

Затем возьмите инструмент Эллипс (Ellipse Tool) и нарисуйте фигуру, как на скриншоте ниже.

Примените фильтр Размытие по Гауссу (Gaussian Blur) и удалите левую часть фигуры.

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте прямоугольник. Удалите левую часть прямоугольника. Инструментом Текст (Type Tool) напишите текст : “Hire Us – We are available for work”.

Тем же способом создайте поисковое поле в правой части шапки.

Заполните слайд-шоу какими-нибудь изображениями и текстом. Это не так уж сложно, поэтому я не буду объяснять, как это сделать.

Финальный результат:

Автор: ultimatedesignertoolkit

photoshop-master.ru


Смотрите также