Фотошоп какой лучше для создания макеты. Создание макета флаера в Photoshop

В этой статье я покажу несколько продвинутых инструментов Photoshop , которые мы будем использовать для создания макета (мокапа ) флаера. Мы будем применять смарт-объекты для заполнителей, параметры «Трансформации » для растяжения, скоса и искривления слоев. У нас есть много других советов и приемов. Прочитав эту статью, вы сможете создавать с помощью фотошопа (Photoshop ) собственные макеты (мокапы) флаеров, визитных карточек и многого другого.

Как сделать макет (мокап) флаера в фотошопе (Photoshop)

Перед тем, как приступить к работе, давайте посмотрим на примеры макетов флаеров, которые мы создавали в Adobe Photoshop .

Создание макета флаера в Photoshop — Техника

1. Самое главное — продумайте, для чего вы собираетесь создавать макет (мокап ) в фотошопе: для визитной карточки, брошюры, листовки, флаера или для чего-то еще. В рамках данной статьи мы разработаем макет флаера. Создайте новый документ с размером A4 , нажмите «ОК ».

Новый документ

2. Теперь создайте копию фонового слоя, нажав Ctrl + J , затем выберите инструмент «Кадрирование » (C ) и сделайте весь документ немного больше, так, как показано на рисунке, приведенном ниже, в документе появятся области по краям, но не беспокойтесь! Выберите серый цвет в качестве цвета фона, залейте эти области серым цветом.

Формат A4

3. Назовите новый скопированный слой Placeholder , затем кликните по нему правой кнопкой мыши, преобразуйте его в Смарт-объект. Помните — не следует масштабировать этот слой до преобразования в Смарт-объект. После преобразования слоя в Смарт-объект можно будет вносить любые изменения. Я уменьшаю его, как показано на рисунке ниже.

Формат A4

4. Сделайте слой Placeholder меньшим, примените эффект «Тень »:

Режим смешивания – Нормальный;
Непрозрачность — 100%;
Угол — -45 градусов;
Расстояние — 85 пикселей;
Размер — 130 пикселей.

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

Создание макета флаера в Photoshop — Техника

5. Хорошо. Теперь согните нижний правый угол переднего слоя. Для этого выберите слой и нажмите Ctrl + T , будет активирован инструмент «Трансформация ». Далее нужно будет выбрать параметр «Деформация », размещенный в правой части меню параметров.

Параметр Деформация — Техника

Создание макета флаера в Photoshop

6. Теперь попробуйте сделать небольшую тень согнутого угла, используйте для этого инструмент «Кисть ». Затем продублируйте каждый слой и нажмите Ctrl + T , кликните по каждой копии слоя правой кнопкой мыши и выберите пункт «Отразить по вертикали », чтобы перевернуть ее. После этого переместите каждую копию ниже оригинального слоя, чтобы создать его отражение.

Отражение

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

Создание макета флаера в Photoshop — Техника

8. Теперь дважды кликните по любому из верхних слоев, в результате чего откроется новый документ. Разместите флаер в этом документе и нажмите Crtl + s , чтобы сохранить его, и вернитесь в основной документ. Вау! Попробуйте поэкспериментировать с тенями и бликами. Теперь вы знаете, как делать самые разнообразные макеты (мокапы ) в фотошопе.

Создание макета флаера в Photoshop — Техника

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

Давайте поподробнее рассмотрим задачу, которую нам предстоит решить — создание макета сайта в Photoshop .

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

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

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

Можно предусмотреть, чтобы при дальнейшей верстке сайт был резиновым в пределах, например, от 1200 до 1400px (чтобы блоки и колонки текста были тянущимися).

Что потребуется для выполнения этого урока?

Photoshop — редактор растровой графики, который как правило применяется при создании макетов.
Комплекты иконок. В сети можно найти большое количество бесплатных наборов иконок.
Несколько небольших картинок для заполнения контента.
Генератор бреда от Яндекса (referats.yandex.ru). Он понадобится для заполнения текстом нашего макета (в качестве «рыбы»).
Шрифты. В примере используется один нестандартный шрифт — Arsenal. Он доступен для скачивания на сайте fontsquirrel с множеством других кириллических шрифтов.

Итак, приступим.

Создадим новый документ, прозрачный, размером 1400 х 2000 (Нажмите ctrl+N и заполните поля в открывшемся окошке).

новый рисунок

Открываем панель со слоями, соответствующими созданному документу. Единственный существующий слой переименовываем в Фон (два раза щелкнув по названию слоя).

На панели инструментов выбираем цвет переднего плана фиолетовый, нажимаем клавиши shift+F5 и заливаем этим цветом фон будущего макета.

Создаем структуру папок, соответствующую частям макета. Упорядоченность позволит лучше ориентироваться, не путаться в слоях. Нужно создать следующие папки — шапка, меню, контент, футер. (Нажимаем сочетание ctrl+f и указываем название соответствующей папки).

Весь дальнейший процесс создания макета можно разделить на несколько этапов.

Размечаем макет направляющими

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

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

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

Для этой цели я использую сочетание горячих клавиш ctrl+shift+; (горячие клавиши нужно настроить)

Создайте горизонтальные направляющие 140px, 180px, 200px, 574px, 900px, 1450px, 1510px, 1610px и вертикальные направляющие 100px, 110px, 130px, 1270px, 1290px, 1300px.

Макет примет вид как на картинке. Это линии, расчерчивающие основные блоки.

Рисуем основные блоки

Переходим в папку, соответствующую шапке сайта. Выбираем основной цвет #3e0b1b.

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

шапка подложка

Теперь перейдем к папке меню. Меню у нас будет фиксированной ширины 750 px, всего 5 пунктов по 150 px. Cоответственно нужно прочертить вертикальные направляющие 350px, 1100px, 500px, 650px, 800px, 950px.

Выбрем цвет переднего плана #7652a5 и изобразим первый пункт. Теперь сделаем полученный прямоугольник слегка наклонным. Нажимаем ctrl+T . В параметрах сверху выбираем наклон -10. Жмем галочку, применяя изменения.

Осталось применить к полученному пункту стили. Если два раза щелкнуть по слою Пункт , откроется окно с настройкой стилей.Применяем стиль Внутренняя тень с настройками как на картинке.

Остальные пункты размножим путем копирования первого. Получится что-то подобное.

Переключимся на папку Контент в слоях. Изменим основной цвет на #c3b4d8 . Рисуем прямоугольник соответствующий странице.

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

Переключаемся на инструмент Линия на панели инструментов, чтобы нарисовать разделитель для страницы (вдоль горизонтальной направляющей 900px, между вертикальными направляющими 130px и 1270px). Цвет #fff.

Осталось создать слой Подвал . В папке рисуем прямоугольник такого же оттенка как шапка (#3e0b1b).

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

Уделяем внимание деталям

Начнем с названия и логотипа. Добавляем дополнительные направляющие: горизонтальная 70px и вертикальная 750px.

Выбираем инструмент Текст, в параметрах выставляем шрифт Arsenal, размер 30px.Щелкаем мышкой в центре, в том месте, где будет находится текст и пишем название (в слоях в этот момент выбрана папка Шапка). Теперь делаем шрифт Verdana 24px и ниже пишем слоган (еще один сайт). Копируем рисунок логотипа в фотошоп (просто перетащив его мышью из папки где он находится).

К слоям логотип, название и слоган применяем слой Тень (см. рисунок).

Копируем иконки в папку меню и размещаем их на пунктах.

Прописываем названия пунктов шрифтом Arsenal italic 24px, оттенка #fff.

Теперь заполним верхнюю часть страницы (папка ).

Расчертим направляющими, где будут располагаться, отступы, названия, блоки. Горизонтальные — 220px, 150px, 260px, 320px, 350px, 380px, 390px, 480px, 550px. Вертикальные -470px, 510px, 880px, 920px. Выглядит это так.

Копируем иконки, которые будут перед текстом.

Переключаемся на Текст, пишем названия шрифтом #444 Arsenal 24px. Рисуем четыре серых блока (оттенок #), называем слои блок1, блок2, блок3, блок4.

Добавим еще 4 направляющих, задающих отступы для строки поиска в блоке1 — 270px, 310px (по горизонтали) и 130px, 450px (по вертикали).

Нарисуем ее в виде прямоугольника #fff. Впишем текст Найти…

Ниже находится еще один Блок. В данном случае, там будет список, написанный шрифтом Verdana 18px.

В блоке справа инструментом Текст вычерчиваем прямоугольник (нажать на левую кнопку мыши и потянуть) , с учетом отступов, отмеченных направляющими 940px и 1270px по вертикали и 280px по горизонтали. Получится текстовая область, ограниченная пунктирами, ее удобно использовать для больших текстов. Помещаем туда список тегов.

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

С помощью направляющих отмечаем отступы слева, справа, сверху, снизу 20px. Заголовок выполняется шрифтом Arsenal 24px, цвета #8f0814 и отстоит от категории статьи на 10px, что отмечено линиями. Расстояние между отдельными записями с картинками также по 20px по вертикали. Текст отстоит от левого края на 120px, плюс отступ 10px.

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

Размечаем среднюю часть страницы — cверху будет отступ 20px для всего контента.

Справа список статей с картинками. Расстояние между картинками 30px, ширина картинок -100 px, отступ до текста справа 10px. Шрифты такие же как в блоке Свежие записи.

Слева находится статья с большой картинкой и кратким содержанием, которая будет занимать пространство между направляющими 130 и 880 пикселей. Картинка от 130px до 430px (ширина 300px). Заголовок Arsenal 24px #444. Текст статьи — Verdana 14px, такого же цвета. От заголовка сделан отступ 10px. Снизу до разделителя такой же отступ 10px.

Внизу страницы, ниже разделителя вставляем большой кусок текста с помощью текстового поля. Я взяла его из рефератов Яндекса, о которых упоминала выше. Параметры шрифта -Verdana, 14px, #444.

Добавляем направляющую посередине футера (1560px по горизонтали), вставляем и центрируем текст с копирайтом по ней.

Вот так выглядит итоговый вариант макета.

На этом все, спасибо за внимание.

ОглавлениеСоздание макетов сайтов: развлечение для избранных Разработка макета сайта: этапы Способ №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. Данная статья является ознакомительной и не позволит вам стать веб-дизайнером. За серьезными знаниями придется еще много покопаться в интернетах.

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

В Фотошопе нарисовать несложный дизайн сайта под силу даже новичку

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

Расшифровка некоторых терминов.

CSS (Cascading Style Sheets) и HTML (HyperText Markup Language) - компьютерные языки, которые используются при создании веб-ресурсов. Если открыть исходный код любой страницы в интернете, там будут HTML-тэги.
Вёрстка - компоновка и монтаж материалов из макета, превращение его в html-шаблон. От этого зависит, как располагаются объекты, красиво ли они выглядят в общей композиции, удобно ли читать текст и тому подобное.
Слои - части макета. Они вместе составляют общую картину. Но их можно редактировать и перемещать отдельно друг от друга.
Тело - место, где находится контент. Вокруг него может быть фон.
Фрейм (Frame) - элемент страницы. Блок с какой-то информацией, картинкой, формой.

Сделать потрясающий сайт с нуля может только профессионал. Для этого нужно разбираться в веб-дизайне и знать HTML. Так как готовый макет надо ещё грамотно сверстать.

Но есть и более простые способы. Существуют онлайн-сервисы и программы, которые автоматически преобразуют.psd (формат файлов Photoshop) в HTML и CSS. Вам останется лишь правильно собрать шаблон.

Для использования Photoshop необязательно быть художником и разбираться во всех опциях программы. Но если вы впервые запустили её и не знаете, как вставить текст, нарисовать геометрическую фигуру, продублировать слой, поменять цвет или выделить произвольную область, стоит начать с чего-нибудь попроще. Чтобы сделать макет в Фотошопе , нужны хотя бы начальные навыки работы с утилитой и понимание базовых функций (как начертить линию, поставить направляющую, выбрать шрифт и тому подобное).

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

Одностраничный. Все элементы, контент, всё наполнение ресурса находится в одном месте. На одной странице. Чтобы просмотреть содержимое сервиса, не надо переходить по ссылкам или открывать новые вкладки. При этом сам сайт может быть сколь угодно большим. В нём поместится и маленькая рекламная брошюра, и огромный роман на 600 листов.
Многостраничный. Соответственно, включает много страниц. Это могут быть, например, «Главная», «Форум», «Гостевая книга», «Ответы на часто задаваемые вопросы», «Контакты». Для каждой из них нужно делать макет. Ещё потребуются навигация и карта сайта: отдельный раздел со ссылками на все части сервиса. Чтобы пользователь мог быстро найти нужную ему закладку.
«Резиновый». Меняет размер в зависимости от разрешения экрана. Растягивается вместе с окном обозревателя. Надо заранее рассчитывать, как будет выглядеть сайт. Если при ширине 1300 всё отображается нормально, то в 900 пикселях часть статьи может «уехать» за границы фрейма, изображения встанут не так, как надо, а flash-анимация закроет форму для ввода.
Фиксированный. Тело сайта не меняет размер. Самый лёгкий и практичный вариант. Чтобы страница выглядела цельной, и при расширении окна не было «пустого» места по краям, можно сделать резиновым фон.

Макет

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

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

Создайте новый документ (Файл - Создать). Размеры подбираются с расчётом на маленькие мониторы или низкое разрешение: 1024×720 пикселей. Это ширина «информационной» части, а не всего рисунка. Если вы хотите страницу в 1100 пикселей, то надо делать документ шириной от 1300 пикселей. Длина, по сути, не фиксирована - она зависит от того, сколько контента вы хотите разместить на ресурсе. Это рекомендации, а не правила. Можете собрать большой макет, если хотите.
Включите линейки. Нажмите Ctrl+R или перейдите в меню Просмотр - Линейки. Это измерительная шкала. Она появляется снаружи рисунка. Без неё придётся прикидывать размеры и расстояния «на глаз», что не очень хорошо скажется на конечном результате. Настроить эту функцию можно в меню Редактирование - Установки - Единицы измерения и линейки. Там лучше поменять сантиметры на пиксели, чтобы работать с одним параметром, а не высчитывать, сколько точек в одном дюйме.
Также следует активировать сетку. Просмотр - Показать - Сетка или Ctrl+Э (отключить её можно также). Это некий аналог тетради в клетку. В Фотошопе будут отображаться вертикальные и горизонтальные линии. На самом рисунке они не появятся. Их можно увидеть только при редактировании. Эта функция нужна, чтобы ровно расставлять элементы шаблона. Кому-то удобнее работать с сеткой, кому-то без неё. Лучшее её включить, если вы впервые делаете сайт.
Чтобы её настроить, перейдите в Редактирование - Установки - Направляющие, сетка и фрагменты. Там можно выбрать размер клеток, а также цвет и тип линий (сплошная, пунктирная, из точек).

Установите направляющие. Между ними будет находиться основной контент-ресурса - фиксированное тело сайта. А за ними - резиновый фон. Чтобы это сделать, нажмите Просмотр - Новая направляющая. В блоке «Ориентация» отметьте пункт «Вертикальный». В поле «Положение» напишите, на каком расстояние от левого края будет находиться объект. Ориентируйтесь по шкале линейки.
Нужны две направляющие - справа и слева от тела страницы. Расстояние между ними должно составлять максимум 1003 пикселей для дисплеев с разрешением 1024×720. Можете указать другую ширину. Но большие ресурсы неудобно просматривать на маленьких мониторах.
Почему 1003, а не 1024? Если сайт надо пролистывать («скроллить») вниз, в браузере будет вертикальный ползунок для прокрутки. Размер этого ползунка - примерно 21 пиксель. Если его не учитывать, появится горизонтальный скролл. И посетителю ресурса придётся двигать страницу вправо-влево, чтобы увидеть всю информацию.
Тело должно быть в центре холста.

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

Для начала вашему макету нужен фон. Его можно сделать самостоятельно или скачать из сети. Существует много ресурсов с бесплатными текстурами. Не ставьте на сайт изображения, на которые распространяются авторские права. Не стоит брать яркий или контрастный фон. Лучше не использовать текстуры с большим количеством мелких выделяющихся деталей. Они будут отвлекать посетителя от тела страницы.
Если просто открыть рисунок в Фотошопе , он окажется на новой вкладке, а не добавится в макет. Выделите весь фон. Для этого нужно сочетание клавиш Ctrl+A или инструмент «Выделение» (он находится на панели слева). Скопируйте его и вставьте в шаблон.
Также эта опция доступна, если нажать Редактирование - Вставка.

В списке справа внизу появится новый слой. Кликните по нему правой кнопкой мыши, чтобы посмотреть возможные действия. В меню «Параметры слоя» можно изменить его имя. В «Параметры наложения» находятся основные настройки изображения. Можно сделать ему свечение, тиснение, глянец, обводку, градиент. Если выберите какую-то опцию, изменения сразу отобразятся в Фотошопе. Есть набор готовых стилей. Так из стандартной текстуры создаются оригинальные дизайнерские решения. И ничего дополнительно рисовать не надо.
Кнопка «Фильтры» есть в строке меню. Там вы найдёте разнообразные имитации (пастель, акварель, карандаши), стилизации, текстуры, эскизы, блики, размытие.
Можно выбрать однотонный фон. Цвет зависит от ваших личных предпочтений. Но лучше не делать его чёрным или ядовитым. Подойдут постельные и мягкие тона или прозрачные холодные (например, светло-серый, нежно-голубой).
После текстур можно собирать сам сайт. Вот тут вам предоставлена свобода для творчества.
Чтобы добавить какую-то фигуру (отрезок, квадрат, овал), нажмите на соответствующую кнопку справа. Она будет иметь вид и название того объекта, который в данный момент выбран для рисования. Например, «Инструмент Эллипс», «Инструмент Многоугольник». В Фотошопе количество фигур ограничено. Но их можно найти в интернете, скачать и установить через меню Редактирование - Управление наборами. В поле «Тип» укажите, коллекцию каких объектов вы загружаете.
В разных версиях программы эти фигуры вызываются по-разному. Либо кнопкой в виде маленького чёрного треугольника (она справа), либо пиктограммой в виде шестерёнки, либо пунктом «Форма растровой точки» (она под строкой меню). Объекты можно комбинировать, группировать, делать из них композиции.
Чтобы создать текстовый фрейм, нажмите на кнопку в виде заглавной буквы «T». Потом выберите место, где должны располагаться символы, кликните туда и напечатайте то, что вам нужно.
Каждый элемент лучше ставить на отдельный слой. Так будет удобнее перемещать и редактировать, не «задевая» весь сайт. Чтобы добавить этот объект, перейдите в Слои - Новый.

Чтобы спроецировать изображение в заранее выбранную область, вначале выделите её, а потом откройте Редактирование - Специальная вставка. Там будут опции «Вставить вместо» и «Вставить за пределами».
Можно часть одного рисунка перенести на новый слой. Для этого надо выделить её, щёлкнуть по ней правой кнопкой мыши и выбрать «Вырезать на новый слой».
С фигурами, надписями и изображениями доступны те же опции, что и с фоном: эффекты, фильтры и так далее.
В Фотошопе существует ещё много инструментов для рисования: кисти, перья, карандаши.

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

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

Как превратить макет в html-файл?

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

Его можно отдать верстальщику, который сделает качественный html-шаблон. Но есть и другой вариант. Воспользоваться сервисами для конвертации PSD-файла в HTML и CSS.

Psd2Html Converter. Платный онлайн-сервис. Быстро конвертирует формат Photoshop в шаблон интернет-страницы. С этим ресурсом даже из некачественного макета можно создать приличный сайт.
PSDCenter
40 Dollar Markup.

Конструкторы

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