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

Перевод статьи дизайнера Claudio Guglieri с описанием процесса проектирования макета сайта от начала до конца.

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

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

1. Перенесите свои мысли на бумагу

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

2. Создавайте зарисовки высшего уровня

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

3. Добавьте сетку вашему PSD-файлу

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

4. Выберите типографику

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

5. Выберите цветовую гамму

На протяжении всего рабочего процесса выбора шрифтов, вы должны работать над цветовой гаммой всего пользовательского интерфейса (цвет фона, текста и пр.). Цвета нужно выбирать в зависимости от функциональности элемента. Обратите внимание на такие сайты как Facebook, Twitter, Quora, или Vimeo.

6. Разделите макет

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

7. Реорганизация установлена

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

8. Бросьте себе вызов

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

9. Обращайте внимание на детали

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

10. Отнеситесь к каждому компоненту так, будто вы представляете его на конкурсе

Должен признать, этот совет не мой. Я слышал это на Fantasy Interactive и был потрясен тем, на сколько четко и правдиво он прозвучал. Каждая деталь должна быть спроектирована как самая лучшая.

11. Оттачивайте свою работу

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

12. Убирайте свои PSD

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

13. Работайте, надеясь на лучшее, но будьте готовы к худшему

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

14. Будьте зацикленными на дизайне, пока не возненавидите его.

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

15. Не тратьте много времени на концепции до того, как поделитесь ими с клиентами

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

16. Дизайнер! Будь лучшим другом разработчика!

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

17. Растолкуйте все, как будто я четырехлетний ребенок

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

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

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

19. Следите за дизайном в ходе процесса

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

20. Следите за своим прогрессом

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

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

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

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

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

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

Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:

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

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

Выделив область заголовка с маской, нажмите CTRL+SHIFT+C , чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум , чтобы создать простую текстуру, затем установите режим наложения «Умножение » и снизьте прозрачность до подходящего значения:

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

Используйте инструмент «Текст » для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:

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

Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica , чтобы текст можно было поместить в html без замены изображений:

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

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

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

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

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

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

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

Используйте эту боковую панель, чтобы разработать секцию Featured Project (Рекомендуемый проект ). Ее элементы могут включать в себя небольшие снимки и отрывки текста:

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

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

Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:

Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T , чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:

Расположите тень по центру экрана, затем удалите лишнее пространство над подвалом. В результате получится тонкая тень, которая «приподнимает » главную страницу, добавив дизайну немного деталей:

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

Cacoo позволяет создавать диаграммы в Интернете. Это абсолютно бесплатный инструмент, который дает возможность создавать каркасы, схемы и UML, используя веб-браузер и приложения.

Gliffy поддерживает создание бесплатных каркасов сайтов и приложений. Вы можете использовать Gliffy в Интернете, или в виде плагина для различных приложений от Google и Confluence. Тут также поддерживается предварительный просмотр каркасов HTML5.

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

Tiggzi – это мобильное приложение для разработки каркасов приложений и сайтов предназначенных для мобильных телефонов. Программа позволяет создавать приложения под HTML5 и JQuery работающих на мобильных телефонах. Вы так же можете экспортировать приложения для Android, IOS и Mobile Web.

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

iPhone Mockup это еще один wireframing инструмент, который позволяет создавать макеты для приложений на iPhone. Эта программа тоже очень проста в использовании, нужные элементы нужно просто перетаскивать из панели инструментов.

Pencil Project это еще одно графическое приложение, позволяющее создавать каркасы для веб-сайтов, поддерживающий экспорт каркасов в различных форматах, таких как HTML, PNG и PDF.

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

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

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

Flair Builder - это еще один широко используемый каркасный инструмент, который позволяет создавать макеты для веб-сайтов и многофункциональных Интернет приложений. Поддерживает различные платформы, такие как Windows, Mac и Linux. Программа была построена с использованием Adobe AIR, что обеспечило лучшую интеграцию и легкую установку.

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

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

Студия Николая Саганенко Макет-Мастер предлагает создание макетов высокой сложности в кротчайшие сроки. Бесплатный выезд специалиста.
Для заказа пишите на Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. . Реквизиты компании: ООО "Архитектурный стандарт". Доставка по РФ.

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

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

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

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

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

Как создать?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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