Как сделать макет или дизайн сайта в Photoshop

Разместил / Просмотров: 187 577 / комментариев 60

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

Продолжение

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте :-)

Создание и размеры документа

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

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

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

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

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

Ширина будущего сайта в 1200 рх

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

А вот как она выглядит:

Выделяем наш слой, нужно просто один раз кликнуть на него:

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

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

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

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

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

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

doc

Вот что должно получиться:

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

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

Переходим в пункт «Тень» и задаём следующие параметры:

Вот, что должно получиться:

После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:

Иконки социальных закладок

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

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

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

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

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

Добавляем название рубрик, кликаем по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня:

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

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

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

Сразу же нужно создать 2 отдельных группы:

  • Метки — в эту группу мы будем добавлять текст с размером наших колонок.
  • Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

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

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

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

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

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

В той же группе добавьте метку с помощью текста как у меня на рисунке выше.

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Сейчас давайте добавим кнопку Далее. Она тоже очень простая. Выбираем инструмент «Прямоугольник со скругленными углами» задаём ему вот это цвет #0dbfe5 и радиус углов в 2рх. И рисуем кнопку размера который Вам понравится:

Теперь добавляем текст и смотрим, что у нас получилось:

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

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

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

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

Вот что должно получиться:

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

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

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит :) Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

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

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

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

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

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

Скачать

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

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

  • Привет от WebDesignMagazine.ru!

    Отличная статья! Единственно, что хотелось бы подправить — СайДбар(от англ Sidebar — что значит боковая колонка) а не Сайтбар.

  • Привет, привет :) И спасибо :)

  • cunmaou

    Супер я теперь твой постоянный читатель

  • Рад, что понравилось :)

  • Konstantin

    Александр, урок супер! Да не многие делятся знаниями о рисовке макета. А у меня пока руки не доходят до этого. Теперь если буду затрагивать эту тему то только в Gimp, и только в видео

  • Костя, рад, что понравилось :) Ну в принципе нет разницы где рисовать макет, главное рисовать :)

  • Konstantin

    Разница в том, что не все могут позволить себе работу в Photoshop. Либо исходя из финансов, либо из ОС.

  • Pantheon

    Александр, не мог бы ты скинуть свой пак «фигур» для фотошопа?

  • Pantheon, все фигуры я брал от сюда http://beloweb.ru/tag/figuryi Я просто точно не помню как они называются :)

  • Alex

    Добрый вечер!В таком серьезном деле я новичок и есть много не понятных мне нюансов.Александр,а точно правильно указано пиксели в Фотошопе?Я ввожу так как написано у Вас,но получается вообще маленький фон.Что делать?

  • Здравствуйте, возможно Вам нужно увеличить этот фон, так как он сначала делается под экран. Увеличьте фон с помощью лупы.

  • Roman

    Спасибо за хорошую статью! Правда меня начало убило «Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.» Может я что-то не понял, но Photoshop имеет такую полезную функцию как увеличение ширины и высоты макета… Находится кажется в «изображение» -> «размер холста». Но решил дочитать до конца… Оказалось не зря, спасибо! ;)

  • Рад, что статья понравилась Вам :) Как говорится, век живи век учись. Спасибо Вам :)

  • zoom in, инструмент увеличительное стекло или [ ctr +] , [ctrl -] на клавиатуре ( нажимать одновременно, а не по очереди)

  • Вика

    Да, фотошоп на винду найти — это ад!))
    На мак нашла за 1 час последние версии и ФШ, и аудишина, и примьера.
    А гимп прекрасная программа, соглашусь. Вот только вчера сдала по ней курсач :)

  • Сергхеи Вакари

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

    Выбрать в редакторе Adobe Photoshop команду меню Image — Canvas Size и таким образом можно расширить макет

  • Спасибо огромное, век живи, век учись :)

  • Вика

    Отличная статья! =) Спасибо! Есть вопрос: как сделать подгруппу в группе «Хидер», к примеру?

  • Здравствуйте, спасибо! Создаёте две группы, и перетаскиваете созданную группу в желаемую группу.

  • Вика

    Спасибо! =)

  • Вика

    Скажите, пожалуйста, где именно взять такие же иконки Социальных закладок (твиттер, письмо..) как и в Вашем макете урока? По ссылкам когда перехожу там очень много всего, а нужное новичку найти сложно…

  • Вика

    Благодарю! =) Теперь возник следующий вопрос (прошу прощения, если он совсем примитивный): Вы иконки добавляли из «Произвольных фигур». У меня иконки после скачивания и распаковки не разместились в произвольные фигуры. Зато они есть в папке в формате PNG и PSD. Когда я открыла файл PNG, открылись иконки, но они черные (одну из них я вытащила на панель)!(( Их можно как-то сделать белыми, чтобы соответствовало цветовой гамме сайта?

  • Да! Нажмите два раза на слое иконки. И выберите Наложение цвета

  • Вика

    Спасибо! Всё получилось!)

  • На здоровье :)

  • Vika

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

  • Яна

    урок потрясающий! очень подробный! спасибо!

  • Спасибо :)

  • Эмиль Гюнтер

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

  • Эта тема довольно обширная, и очень тяжело вместить всё в одно :) Подобные вопросы лучше всего рассматривать в отдельных постах :)

  • Эмиль Гюнтер

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

  • Эх, как я Вас понимаю :) Очень много шаблонов моих не вышло из — за этого «Всё не то» :) Я думаю, подобное приходит с опытом :)

  • Эмиль Гюнтер

    А можно я покажу Вам свой макет? Конечно он еще на стадии развития, но может Вы скажите, где у меня косяки. Я показывал другу, он говорит, что все ужасно. И мне никогда не стать дизайнером. :) Мол, нет таланта. Пора бы уже смириться.

  • Ого, жестокий друг у Вас :) конечно показывайте! :)

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

  • Эмиль Гюнтер

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

  • Даже не знаю, может туда можно и слайдер поставить, нужно экспериментировать :)

  • Эмиль Гюнтер

    Приветсвую. Я по мелочи еще поработал. Кароче, не знаю. Еще нужно проработать некоторые детали. https://www.dropbox.com/s/dvs116pl3d38z0k/%D0%9C%D0%B0%D0%BA%D0%B5%D1%82%20V2.png?dl=0

  • Отлично! Теперь его нужно сверстать!

  • Эмиль Гюнтер

    Я его еще доделаю. Футер нужно еще добавить. Потом пришлю полную версию на оценку. Спасибо :)

  • Ок! Жду! :)

  • Эмиль Гюнтер

    Как-то так. http://www.picshare.ru/uploads/160406/Qg22l7bmJ2.png

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

    Хочу слышать ваше мнение. Спасибо!

  • Отлично, мне нравится! Тем более если Вы в том новичок, тогда вообще круто! :)

  • Эмиль Гюнтер

    Я добавил некое «улучшение». Мне показалось, что так будет лучше. http://s8.hostingkartinok.com/uploads/images/2016/04/022118dd48c57e622701a3cdaea9b02a.png

  • Отлично :)

  • Эмиль Гюнтер

    На меня что-то напало и я за пару часов вот такое выдал:

    http://s8.hostingkartinok.com/uploads/images/2016/05/545c98d0f1b665a6293debf18f40c41d.png

    Ваше честное мнение? :)

  • Ну даже не знаю, слишком просто :)

  • Эмиль Гюнтер

    А слишком просто это плохо? :)

  • Ну как по мне прошлый был лучше. Это моё личное мнение :)

  • Эмиль Гюнтер

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

  • Да, сама идея, конечно, отличная! Правильно, нужно разные варианты пробовать!

  • Эмиль Гюнтер

    Хорошо. Я доработаю макет, потом результат пришлю. Спасибо :)

    Я дизайном начал буквально недавно. Раньше все так себе. Первый мой дизайн был на столько вырвиглазным, что даже вспоминать неохота. Конечно, этот вариант по сравнению с первым, вообще бомба. xD

  • Мне Интересно

    Спасибо за статью! Кстати как вам такой вид сайта?

  • Mr CaT

    Молодцы,большое спасибо за статью,весь инет перерыл и только эту инфу нашел

  • :)))

  • Dilnoza Mullakhanova

    Создала группу «Разделитель», выбирала «Овальная область» и новый слой. Попыталась рисовать овал. Но не получается( «warning no pixels are more than 50 selected. the selection edges will not be visible» — вот это появилься(

  • Dilnoza Mullakhanova

    Хорошая статья для начинаюших! Спасибо большое за урок)

  • Dilnoza Mullakhanova

    вот мой макет)