Создание макета в фотошопе. Делаем рекламный дизайн макет. Обращайте внимание на детали

15.02.2019

Флешка

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

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

Создание макетов сайтов: развлечение для избранных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ №1. Нарезка макета из шаблона сайта

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

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

разобраться в основных инструментах 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. Для того чтобы увеличить высоту макета, используйте инструмент «Рамка» (С).

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

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

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

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

Способ №2. Создание макета сайта в фотошопе почти

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

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

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

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

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

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

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

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

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

Шаг 1.

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

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

Шаг 2

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

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

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

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

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

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

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

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

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

Способ №3. Онлайн-инструмент для создания макетов

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

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

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

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

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

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

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

Тезисы

Сначала я изложу основные тезисы. Многие из них претендуют на труды небезызвестного персонажа по кличке K. O., но тем не менее, не все об этом знают.

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

Верстают в программах для верстки

Я часто слышу о том, что дизайн пытаются делать в photoshop"e.
Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:

Для дизайна есть InDesign (ну или QuarkXPress).
Для рисования есть Illustrator (ну или CorelDRAW).
Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.

Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop"e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Не бойтесь объяснить заказчику, что макеты делаются не в photoshop"e и завтра ровно в 6:34 он получит макет в PDF.

Правильно создайте документ

При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:

Назначение: Web - Это переведет все размеры в пиксели. В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Размер страницы: 960 это стандартный размер. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше.
Ах и да, ширина должна быть кратной двум. Один раз я встретил сайт шириной 1227 пикселя.
Про сетку я расскажу в следующем разделе, ее всегда можно поменять в Layout->Margins and columns.

Хинт: многие даже опытные дизайнеры не знают, что высоту (впрочем как и ширину) можно выставлять индивидуально для каждой страницы внизу закладки pages самый первый значек. Когда презентуешь макет в PDF длиннющие белые хвосты внизу страницах незачем.

Используйте сетку

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

1 - margin, 2 - ширина колонки, 3 - gutter, 4 - стандартный отступ

Все размеры сетки должны быть целочисленными и желательно кратными двум.
Вот список параметров:

Ширина макета
Ширина внешних отступов (margin)
Число колонок
Отступы между колонками (Gutter)

Когда определились со всеми этими параметрами подставляем их в формулу
Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)
Например для документа созданного выше в примере это будет
960 = 10*2 + х*6 + 14*5
х = 145
х (ширина колонки) получилась целочисленной, значит все в порядке, если нет, поменяйте отступы.

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

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

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

Используйте функционал шаблонизирования

На сайтах различные элементы интерфейса и самое главное общий шаблон остается одинаковым на всех страницах.
Поэтому его надо хранить в master pages. Вопросов «а какая из этих страниц верный макет» больше не будет.

Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом.

Учитывайте не статичность сайтов

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

Вы работаете с рыбой, реальные тексты будут другие

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

Подготовите материалы для верстки

Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках.
Многие опытные дизайнеры уже знают, что это окошко программист нарисует border-radius"ом с box-shadow (я не говорю, что нужно знать названия свойств, просто со временем откладывается, что многие даже достаточно сложные фигуры и эффекты рисуются на css)
Но если вы новичок в этом дело спросите конкретно «что надо?».
Немного о сохранении картинок.
Все надо сохранять не просто через save в photoshope, а через save for web.
Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png-24.
Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие.

Предоставьте список используемых цветов в HEX формате.

На забудьте дать все шрифты используемые в макете.

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

Теги: дизайн сайтов, верстка сайтов, frontend, пособие, turtorial

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

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

Из чего состоит макет?

Подавляющее большинство веб-страниц состоит из:

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

Как создать?

Придумайте и продумайте структуру. Не лишним будет отрисовать её на листе бумаги или в самом Photoshop.

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

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

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

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

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

Чтобы включить линейки, либо нажмите сочетание клавиш Ctrl+R , либо выполните команду Просмотр -> Линейки главного меню программы.

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

В итоге ваш шаблон должен быть разграничен.

Нарисуйте макет. Добавьте графику, линии, кнопки и прочие элементы. Здесь всё индивидуально, а инструменты для работы мы рассматривали на протяжении .

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

Как разрезать

Уже готовый макет необходимо разрезать «на кусочки», чтобы использовать его элементы в дизайне сайта, часть которого будет реализована через HTML, часть - через CSS, а часть - при помощи как раз тех самых картинок, на которые макет будет разрезан. Помните об этом, когда захотите оставить несколько картинок с белым фоном, текст страницы или названия ссылок - оставлять нужно только то, что будет браться из графических файлов и не будет реализовано другими средствами.

Итак, макет готов и открыт. Будем разрезать.

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

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

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

Аналогичным образом сделайте следующий разрез, и так до тех пор, пока работа не будет завершена.
Когда всё сделано, сохраните результат. Для этого выполните команду Файл -> Экспортировать -> Сохранить для Web (старая версия), проверьте настройки (выберите формат, качество и т. д.), нажмите Сохранить и укажите папку, в которой будет создан каталог графических файлов.

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

Макет создан, разрезан и полностью готов.

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

Давайте посмотрим, что мы будем создавать в этом уроке.

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

Бесплатный шрифт Free Font Sansation .
Текстура 26 Repeatable Pixel Pattern
Набор социальных иконок Free Social Media Icons
Иконка руки Hand Cursor Icon
Стоковое изображение Stock photo: Harvest 1
Стоковое изображение Stock photo: New York Streets 3
Стоковое изображение Stock photo: Daisy Age
Стоковое изображение Stock photo: A tree on the horizon
Стоковое изображение Stock photo: Sales figures
Стоковое изображение Stock photo: Time is Money!

Подготовка холста

Шаг 1

В этом уроке мы будем использовать фреймворк 960 GS . Нужно с качать шаблон с его главной страницы и найти внутри архива файл "12 Column Grid".

Нажмите на иконку глаза возле слоя 12 Col Grid, чтобы скрыть его видимость — пока он нам не понадобится.

Шаг 2

Пока размер нашего холста достаточно мал. Нажимаем Image> Canvas Size (или Ctrl +Alt + C), чтобы сделать размер немного больше и устанавливаем опорную точку в центре.

Шаг 3

Нажмите Ctrl + R , чтобы показать линейку. Нажмите View> New Guide (Просмотр — Новая направляющая), чтобы создать новую направляющую. Выберите Vertical и Position (Положение): 185 px , чтобы создать вертикальную направляющую, которая будет сдвинута на 185 px от левого края.

Шаг 4

Создайте еще вертикальные направляющие на расстоянии в 150 , 1095 и 1130 пикселей .

Подготовка Color Theme

Шаг 5

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

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

Подготовка фона

Шаг 6

Выберите слой Background и нажмите на значок замка, чтобы разблокировать этот слой. Дважды щелкаем по изображению, чтобы изменить цвет фона.

С помощью пипетки выберите второй цвет нашей цветовой схемы (# 948371) .

Шаг 7

Нарисуйте прямоугольную форму в верхней части холста. Это будет второй фон.

Шаг 8

Выберите созданную форму и перейдите в панель Option Bar. откройте Fill Color и нажмите иконку выбора цвета. Когда появится диалоговое окно Color Picker, выберите первый цвет. В поле Stroke выберите None

Шаг 9

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

Измените его режим Blend mode на Screen и уменьшите непрозрачность Opacity до 37% .

Шаг 10

Создайте новый слой и назовите его «тень».

Нарисуйте прямоугольное выделение в нижней части второго фона, как показано на рисунке ниже. Нажмите Edit: Fill . Установить Use - Black . Нажмите OK , чтобы заполнить выделение черным.

Шаг 11

Размойте его с помощью Gaussian Blur. Нажмите Filter> Blur> Gaussian Blur .

Шаг 12

Удерживая нажатой Alt , поместите курсор между тенью и слоем со вторым фоном. Не отпуская Al , нажмите, чтобы преобразовать слой в обтравочную маску . Преобразовав его в Clipping Mask, тени сейчас размещены внутри верхнего фона.

Шаг 13

Измените прозрачность тени Opacity до 50% . Ниже вы можете увидеть результат при 100% увеличении.

Шаг 14

Пришло время, чтобы разместить все слои в одну группу. Чтобы сделать это, выберите все слои и нажмите Ctrl + G .

Header

Шаг 15

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

Шаг 16

В панели Option Bar , установите цвет Stroke - # af9f8e .

Шаг 17

Для заливки выберите следующие цвета линейного градиента — от # d0c4b9 к #a89c91 .

Название сайта

Шаг 18

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

Активируйте инструмент создания многоугольника Polygon tool и установите количество сторон - 3 . Нарисуйте треугольник с цветом заливки Fill: # 3d3123 и значение обводки Stroke : None . Добавляем к слою тень - Layer Style > Drop Shadow .

Шаг 22

Подчеркнем активную кнопку меню. Активируйте инструмент Линия и установить ее размер weight - 5 пикселей . Выберите цвет # f76b6a и линия должна быть без обводки.

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

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

Шаг 23

Давайте сохраним настройки стилей для текста. Эта что-то похожее на упрощенную версию стилей символов в InDesign. Чтобы сохраним их, нужно активировать текст, а затем нажать на иконке "New Character Style".

Дважды щелкните на новый стиль и выберете следующие настройки.

Шаг 24

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

Шаг 25

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

Шаг 26

Так в чем же преимущество использования стилей символов? Они помогут нам централизовать настройки текста. Мы можем просто изменить стиль символа, чтобы отредактировать любой текст. Например, если изменить стиль Top Menu – Normal на Corbel, все элементы меню автоматически изменятся на Corbel.

Шаг 27

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

Шаг 28

Удалите выделение, нажав Ctrl + D. Размойте черную область, применив фильтр Filter> Blur> Gaussian Blur .

Слайдер

Шаг 29

Нарисуйте прямоугольную форму шириной в столбцов (см. ниже).

Для цвета заливки выберите # dfd1c2 . Цвет Stroke — # c8baac, размер 10 pt . Нажмите на маленькую стрелку рядом с линией, чтобы убедиться, что выбрана опция Align Insid.

Шаг 30

Вставляем изображение, как показано на рисунке ниже. Конвертируйте его в Clipping Mask, нажав Ctrl + Alt + G . Изображение будет автоматически размещено внутри блока слайдера. При необходимости, вы можете изменять размер и перемещать его, никак не влияя на его рамку.

Шаг 31

Нарисуйте еще одну прямоугольную форму возле слайдер таким же цветом. Убедитесь в том, что форма будет привязана к крайней направляющей. Добавляем стили Layer Style> Pattern Overlay, используя текстуру

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? :)

Продолжение

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте:-)

Создание и размеры документа

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

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

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

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

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

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

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

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

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.

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

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

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

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

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

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

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

Иконки социальных закладок

Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это , но можно поставить и обычные скачанные иконки. Скачать можете вот .

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

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

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

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

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

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

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

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

Сразу же нужно создать 2 отдельных группы:

Метки — в эту группу мы будем добавлять текст с размером наших колонок.
Контент — группа где будет находиться вся наша середина сайта.

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

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

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

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

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

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

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

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

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Теперь добавляем текст и смотрим, что у нас получилось:

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

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

Отменяем выделение и ищем середину круга с помощью линейки

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

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

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

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

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

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит:) Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

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

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

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

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.