Как сделать макет в фотошопе cs6. Из чего состоит макет? Панель с информацией

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

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

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

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

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

Как создать?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

К вашим услугам - каталог шаблонов, разработанный специалистами типографии «Принт».

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

Как сделать макет

Алгоритм работы с каталогом очень прост.

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

Преимущества очевидны:

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

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

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

Конструктор макетов от типографии “Принт” - что это такое?

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

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

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

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

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

Бесплатный Онлайн редактор: плюсы и минусы

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

Плюсы, которыми обладает бесплатный конструктор

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

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

Отсутствие “глухих телефончиков”. Есть известное выражение: “если хочешь, чтобы работа была сделана как надо, сделай ее сам”. С нашим конструктором вам не придется переживать, что вас не так поймут, выберут не тот оттенок или перепутают название фирмы. С собой-то вы точно найдете общий язык:).

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

Минусы, которые имеет графический редактор:

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

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

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

С чего начинается создание дизайн макета

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

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

Типография “Принт” предлагает сделать дизайн макета абсолютно бесплатно. За его основу может быть взят один из нескольких десятков готовых шаблонов, которые уже есть в нашей библиотеке. Мы постарались систематизировать эти шаблоны по темам и сферам применения, так что вам будет нетрудно найти необходимый именно для вас.

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

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

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

Виды дизайн макетов

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

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

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

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

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

Делаем рекламный дизайн макет

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

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

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

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

Урок дизайна макетов

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

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

Берем пример с опытных верстальщиков:

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

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

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

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

Как возникают лучшие дизайн макеты

Многие ошибочно полагают, что хороший макет - это макет красивый. Или тот, за который много заплатили. Или тот, который нарисовал очень крутой дизайнер. Все это очень далеко от истины. Самое главное качество - это эффективность. Спросите себя: выполняет ли мой макет поставленные перед ним цели? И если вы ответите “да” - поздравляем! Вы проделали хорошую работу.

Как понять, по силам ли вам разработка макета?

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

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

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

Последний довод “за”:

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

Как сделать макет без недостатков

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

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

Почему так случается?

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

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

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

Признаки хорошего дизайнера:

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

У дизайнера есть свое портфолио, и он не стесняется его показывать. Прежде чем доверять специалисту свой заказ изучите его предыдущие работы. Хорошо, если это будут графические изображения. Еще лучше, если он сможет вам показать их воплощение в реальности (так называемый, “авторский экземпляр”)

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

Надеемся, эта информация поможет вам сделать правильный выбор.

Как сделать макет своими руками

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

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

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

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

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в 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), и вписываем наш логотип, только цвет текста делаем чуть темнее.

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

Вот и всё, друзья, у нс готовый макет, который уже можно верстать:)

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

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

До скорых встреч.