В фотошопе сделать веб страницу. Бесплатный Онлайн редактор: плюсы и минусы

Все советы

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема - создание дизайна сайта в Photoshope. В целом, все, что касается создания рабочих макетов сайтов, это практические уроки, и в интернете информации об этом крайне мало. Умельцев много, много рекламы и платных курсов, вебинаров… но, по сути, бесплатно делиться секретами и тонкостями никто не хочет. Типа, попробуйте, помучайтесь, и убедитесь, что «без меня» вам не справиться.

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

Photoshop и веб-дизайн

С создания функциональных макетов будущих сайтов начинается 98% проектов веб-дизайна, и практически все они сейчас рисуются в Фотошопе. Что же такое макет?

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

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

расположение меню;

навигация;

цветовая гамма;

шрифты и т. д.

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

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

С чего начать разработку макета?

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

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

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

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

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

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

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

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

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

Дизайн-макет в Photoshope

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

Документ

Стандартный макет имеет ширину 960 пикселей. Открываем «Документ» - Новый - задаем размеры. 1200*1500 пикселей будет достаточно, разрешение оставляем 72.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Теперь выделяем весь документ (клавиши Ctrl+A), нам нужно определить область в 960 пикселей и добавить направляющие.

В меню программы выбираем «Select/Выделение» - «Transform Selection/Трансформировать выделенную область». В свойствах устанавливаем значение ширины - 960 и фиксируем рабочую область макета. Направляющие оставляем на границах выделения.

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

Заходим «Select/Выделение» - «Transform Selection/Трансформировать выделенную область», и уменьшаем выделение до 920 пикселей. Макет автоматически разместится по центру, и у вас получится отступ в 20 пикселей с каждой стороны. При изменении ширины не забывайте переустанавливать направляющие.

2. Шапка и текстура

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

выделенная область заливается 1 цветом;

в меню выбираются стили слоя;

«Gradient Overlay/Наложение градиента».

Объем можно добавить подсветкой:

создается новый слой;

выбирается мягкая кисть размером 600 px;

для кисти устанавливается цвет #19535a;

в 1 клик в нужной части шапки рисуется блик.

Расскажу еще про одну функцию - текстуру. Из любого цвета можно сделать текстурную картинку:

инструментом «Pencil Tool/Карандаш» рисуем 2 точки;

видимость фонового слоя временно отключаем;

через меню «Edit/Редактирование» - «Define Pattern/Определить узор» получаем готовую текстуру.

Приблизительно так:

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

Теперь самое время открыть Фотошоп, который для веб-дизайна давно стал незаменимым помощником, и сделать набросок какого-нибудь простенького макета из 2–3 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу - залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

Что такое макет (мокап) сайта?

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

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

Макет в процессе разработки продукта

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

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

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

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

Макет сайта, для чего он нужен?

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

Преимущества разработки макета сайта

С помощью макета дизайна сайта дизайнеры могут:

Обнаружить возможные проблемы на раннем этапе

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

Предложить варианты на выбор

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

Легко донести свое видение до клиента

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

Макет (мокап) визуального оформления сайта — отличная возможность и для владельца продукта, и вот почему:

Привлечение инвесторов

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

Макет в качестве руководства

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

Простое внесение изменений

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

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

Как создать макет (мокап) для презентации сайта?

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

Вы помните опыт Mcdonald’s ? Братья Ричард и Морис Макдональды нарисовали на полу макет своей кухни, схематично обозначили порядок всех предметов и заставили своих сотрудников двигаться так, как будто они находятся на настоящей кухне. Таким образом, они смогли выявить оптимальную траекторию для каждого работника в соответствии с выполняемыми им задачами. Это был первый случай, когда дизайн помог сократить время приготовления пищи с 10 минут до 30 секунд.

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

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

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

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

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

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

На этом этапе команда должна ответить на вопрос о том, будет ли дизайн адаптивным, плоским или выполненным в стиле material ?

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

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

Какие шаги нужно продумать при создании макетов сайта

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

Основные элементы разработки макета

Стиль

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

Логотип

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

Структура

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

Элементы призыва к действию

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

Выбор макета

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

Типичные ошибки при создании макета веб-страницы

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

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

Ошибка макета — слишком много элементов

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

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

Ошибка макета — неправильные цвета

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

Нечитаемый текст. Цвета, используемые для текста и фона, определяют насколько легко будет читаться текст. Лучший вариант — темный текст на светлом, однотонном фоне. Если пользователю трудно прочитать текст, он немедленно закроет веб-страницу. Яркий цвет текстов или экстравагантные шрифты могут превратить ваш дизайн в нечто подобное:

Ошибка макета — нечитаемый текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Niranth; Перевод: Слуцкая Светлана

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

Ресурсы урока:

Набор иконок (wefunction.com)
Альтернативный набор иконок
Иконка Twitter (iconeden.com)
Шрифт Bebas (dafont.com)

Шаг 1. Mockup

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

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

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

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

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete , чтобы удалить выделенную часть.

Слой с подсветкой отразите по вертикали (Ctrl + T) .

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструментПеремещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

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

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование - Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N) , выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

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

Выделите нижнюю половину тени и удалите (Delete) .

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T) , а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопкуВыравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool) . Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

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

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J) .

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

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

Шаг 13. Добавляем контент

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