Как сделать psd макет сайта: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop

26.03.1992 alexxlab

Содержание

Делаем грамотный макет сайта / Habr

Вместо вступления

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

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

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

Создание дизайна сайта в фотошопе, размеры макета

/ Сергей Нуйкин / Веб-дизайн

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

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

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

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

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

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

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

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

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

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

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

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

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

Создание макета сайта в Photoshop – 50 пошаговых руководств

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

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

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

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

40 руководств по Photoshop для разработчиков;
31 бесплатный набор пользовательского интерфейса;
100 бесплатных шрифтов;

30 бесплатных тонких и легких шрифтов.

Макет портфолио в стиле Windows 8

Дизайн элегантного макета блога в Photoshop

Дизайн сайта портфолио в Photoshop

Создание стильной страницы портфолио с временной шкалой с помощью Photoshop

Создание макета микроблога Code Ready

Создание чистого макета корпоративного веб-сайта

Создание портфолио в стиле FabricTextured Web с использованием Photoshop

2 Макет

Создание шероховатого полупрозрачного веб-портфолио Дизайн

Дизайн чистого интерфейса веб-сайта электронной коммерции в Photoshop

Как создать профессиональный веб-макет в Photoshop

Создать чистый и красочный макет для электронной коммерции в Photoshop

Создать современный и потрясающий веб-макет

Как создать расширенный макет хостинга

Как создать бизнес-шаблон в Photoshop

Научитесь создавать игровой макет в Photoshop

Дизайн Профессиональный макет блога в Photoshop

Дизайн Grunge WordPress Тема

Дизайн веб -сайта Textred Outdoors в Photoshop

Создайте элегантный дизайн веб -сайта в Photoshop

9003

.

Макет в Photoshop

Создание гранжевого веб-дизайна с бумажной текстурой

Создание чистого спортивного веб-макета в журнальном стиле в Photoshop

Создайте макет Rockin’Website в Photoshop

Дизайн элегантный блог профессионального путешествия

Дизайн художественный акварельный блог

Cool Photograph Photograph.

Создание теплого и веселого интерфейса веб-сайта в Adobe Photoshop

Как создать аккуратный макет веб-сайта в Photoshop

30 лучших руководств Photoshop по макетированию веб-дизайна

автор: Madalin Tudose в: Вдохновение, Ресурсы

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

Этот обзор включает в себя 30 лучших руководств по макетированию веб-дизайна, созданных в Photoshop : макеты портфолио, макеты, предназначенные для блогов, бизнес-макеты и многое другое… Я уверен, что вы узнаете некоторые отличные методы проектирования, следуя любому из этих руководств.

Как создать уникальный красочный макет сайта

Создание красивого веб-сайта с нуля

Создание тематического веб-дизайна Magic Night с нуля в Photoshop

20163