Создание дизайна сайта при помощи Photoshop

Содержание

Пошаговое создание макета сайта в фотошопе – шаблон для сайта

Создание дизайна сайта при помощи Photoshop

1,790  3 

Оглавление

Итак, вы решили поднять бизнес на новый уровень и запустить свой собственный сайт. У вас есть несколько вариантов:

  • Заказать ресурс в web-студии. Вы получите качественный продукт с продуманным юзабилити и чистым кодом. Он будет работать без багов на любом устройстве: от ноутбука вашей бабушки до айфона последней серии. Однако такое вложение требует денег, которые не всегда есть в наличии.
  • Нанять фрилансера. Найти хорошего дизайнера на фрилансе – все равно что искать спонсоров для стартапа. Работа настоящего специалиста стоит дорого (см. пункт выше), а тратить время на постоянные переделки, доработки и споры с дилетантом, наверняка, не очень хочется.
  • Воспользоваться онлайн-конструктором. Не рекомендуем, т.к. такие сайты практически не поддаются SEO-продвижению, а перспективу годами платить за целевой трафик из контекстной рекламы радужной не назовешь.
  • Заняться созданием сайта своими руками с нуля. Владея минимальными навыками верстки работы в Фотошопе, вы сможете легко нарисовать простой макет. А затем сверстать и выложить его в Интернет.

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

Как в Фотошопе сделать дизайн сайта

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

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

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

Прежде, чем начать: подготовительный этап

Создайте файл будущего макета и придумайте для него понятное имя. Для этого нажмите «Файл – создать».Размеры, которые предлагает Фотошоп по умолчанию, не подойдут. Создаем файл 1024×720 пикселей, а затем сохраняем его, включаем линейки (Ctrl+R) и активируем сетку (Ctrl+Э). Если все сделано правильно, вы увидите перед собой лист, расчерченный как школьная тетрадка в клеточку:

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

Сетку можно настроить самостоятельно (тут: «Редактирование – Настройки – Направляющие, сетка и фрагменты») или скачать готовое решение в Интернете.

Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации

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

Направляющих нужно две, и расстояние между ними должно составлять не более чем 1003 пикселей (для дисплеев расширением 1024 х 720).

Начинаем рисовать

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

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

Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V).

Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

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

Делаем шаблон для сайта

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

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

Разберем на примере хедера (header) и создания меню сайта. Создадим группу, назовем ее «Хедер» и в ней создадим подгруппу «Верхнее меню» с новым слоем «Фон». Для этого нажимаем на иконку в правом нижнем углу страницы:

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

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

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

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

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

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

В результате вашей работы вы получите дизайн сайта, готового к верстке с помощью html и css. А о том, как сверстать макет, в нашем блоге уже выходила отдельная статья
Как самому создать сайт или «не боги горшки обжигают».

Источник: https://stebnev-studio.ru/blog/sozdanie-maketa-sayta-v-photoshop-rukovodstv/

Создание дизайна сайта в Photoshope: знакомство с редактором и его возможностями

Создание дизайна сайта при помощи Photoshop

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема — создание дизайна сайта в 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 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу — залог успеха! Желаю вам удачи. На этом у меня все! , и вы не пропустите самый интересные статьи. Пока, до новых встреч!

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

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

Узнать подробнее

Источник: https://webformyself.com/sozdanie-dizajna-sajta-v-photoshope-znakomstvo-s-redaktorom-i-ego-vozmozhnostyami/

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

Создание дизайна сайта при помощи Photoshop

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

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

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

Продолжение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

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

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

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

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

Важно!

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

Группы

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

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

Верхнее меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Логотип

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

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

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

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

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

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

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

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

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

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

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

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

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

Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #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 файл. Скачивайте, и смотрите если что то не поняли.

Скачать

Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Как сделать дизайн сайта в фотошопе с нуля

Создание дизайна сайта при помощи Photoshop

Дата редактирования: 19.03.2015 Просмотрен: 37837

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

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

В статье используются названия инструментов и термины описание, которых не реально включить в данный материал из за объема. Поэтому если ты впервые открыл(а) эту программу, то нужно сначала изучить азы работы с ней. Еще рекомендую ознакомится с материалами раздела “Photoshop”.

Создание и подготовка файла проекта

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

  1. Дать имя своему макету, у меня на примере “mysite
  2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
  3. Единицы измерения установи в “Пикселях“. Разрешение “72” Пиксели/дюйм.
  4. Жми “OK”. И сохраняй его как psd “Файл > Сохранить как…” в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент “Прямоугольник“,  установи в параметрах инструмента значение “Пиксели”  и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным). 

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения “Прямоугольная область“. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

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

Сохрани, то что получилось “Файл -> Сохранить для Web -> PNG-24

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

  1. Правый клик на файле
  2. В контекстном меню “Открыть с помощью”
  3. Выбери браузер которым пользуетесь (у меня hrome).
  4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
  5. Кликни один раз для отображения изображения в полный размер.

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

Создание шапки сайта

Теперь залей слой, который мы использовали для установки направляющих, белым цветом. И приступим к созданию шапки сайта. Для этого создай новую группу слоев и назови ее “Шапка сайта”

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

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

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:
  1. Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
  2. Выбрать инструмент “Перемещение” (это стрелочка напоминающая курсор)
  3. Открой вкладку с логотипом
  4. Наведи курсор на изображение логотипа
  5. Нажми и не отпускай левую кнопку мыши
  6. Тащи изображение на вкладку с макетом
  7. Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
  8. Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента “Текст” пишу “Горячая линия” и номер телефона организации “+7 (3435) 25-60-60”. Я разместил телефон в шапке по двум причинам.

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

Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

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

Создание дизайна главного меню сайта

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

Теперь нужно добавить пункты меню и подобрать для них подходящий цвет (один пункт меню я оставил белым – это нужно для того что бы показать как будет выглядеть пункт меню при наведении курсора мыши)

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

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

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

  1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
  2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
  3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
  4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне “Символ”

Я использовал 14 размер и стандартный для Windows шрифт “Verdana

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

Получилось вот такое меню:

Дизайн содержимого сайта

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

У любой страницы должен быть заголовок и собственно сам контент. Для начала я установлю две направляющие. Первую горизонтальную по верхнему краю меню. Вторую вертикальную на расстоянии 20px от левого края левого меню.

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

Получилось вот что:

Дизайн подвала сайта

В подвал сайта обычно помещают счетчики, дополнительные дублирующие меню, копирайт и т.д. Я так и сделал, разве что меню не разместил.

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

Результат:

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

Источник: http://www.opengs.ru/site/dizajn-sajta.html

Веб-дизайн: аккуратный макет для веб-сайта в Photoshop · «Мир Фотошопа»

Создание дизайна сайта при помощи Photoshop

Очередной урок, посвященный веб-дизайну. Здесь мы покажем, как создаются макеты для сайтов с использованием системы направляющих 960 Grid System. Вы увидите, как при помощи таких приемов макетирования процесс правильного позиционирования становится четким и прозрачным. К тому же по окончанию данного урока у вас получится стильный, аккуратный скин для вашего сайта.

1 Шаг

Начните с создания нового документа в фотошоп шириной 1680px и высотой 1100px, затем залейте фон слабым серым цветом #F9F9F9.

2 Шаг

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

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

Загрузите сетку “960 12 column grid” в фотошоп.

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

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

Сначала создайте еще один файл в Photoshop размерами 24?24px, удалите в нем фон и проведите единственную линию в 1px по самой последней линейке рабочей области.

Нам необходимо его сохранить, как шаблон (Edit > Define Pattern) и дать ему какое-нибудь выделяющееся имя.

Далее вернитесь в свой документ и создайте новый слой. Залейте его только что созданным шаблоном (Edit > Fill и выберите его).

Осталось разметить рабочую область тремя направляющими. Создайте новую вертикальную направляющую: View > New Guide, выберите пункт Vertical и задайте ей позиционирование на отметке 360px. Точно так же создайте еще две направляющих на отметках 840px и 1320px. Так мы выделили область размерами 960px между отметками 360px и 1320px и провели одну направляющую ровно посередине документа.

Если же вы работаете прямо из файла с 960 Grid System, в нем уже настроены удобные направляющие. Просто откройте View > Show > Guides.

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

3 Шаг

Теперь, когда у нас готов шаблон разметки, можно браться за проектирование структуры сайта. Дизайн страницы будет разделен на 5 блоков: Шапка (Header), Выноска (Callout), Левый блок (Content — Left), Правый блок (Content — Right), Подвал (Footer).

4 Шаг

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

Возьмите Rectangular Marquee Tool и выделите им область по всей ширине документа в самом верху высотой 120px (включив видимость своей горизонтальной разметки, высоту в 120px рассчитать более чем легко — это всего 5 строк по 24px каждая). Залейте шапку темно-серым (#2C2C2C). Шапка будет содержать лого сайта и навигационное меню.

5 Шаг

Теперь в верхний левый угол страницы поместите ваш логотип, выровняв его по второй колонке (что есть отступ в 40px). В качестве логотипа я использовал обыкновенную надпись, состоящую из двух частей шрифтом Century Gothic и кеглем в 50pt.

Первая часть надписи имеет светло-голубой оттенок (#ADC7D9), вторая — жирное начертание (bold) и белый цвет (#FFFFFF).

Далее я добавил к лого внутреннюю тень (стиль Inner Shadow); понизил непрозрачность (Opacity) стиля до 25% и задал такие параметры: Distance — 2px, Choke — 0%, Size — 5px.

6 Шаг

Здесь оформим навигационное меню. Чтобы сохранить чистоту и порядок на странице, мы будем использовать текстовые ссылки в меню. Выберите шрифт Arial размером 18pt и создайте надписи для ссылок. Закрасьте активную кнопку белым цветом (#FFFFFF), а остальные — светло-серым (#BBBBBB). Выровняйте их по вертикали и поместите в средней полосе шапки.

7 Шаг

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

Повторите тот же процесс, что и с шапкой (выделение инструментом Rectangle Marquee), но на этот раз имейте в виду высоту блока в 240px, залейте выделение тем же светло-голубым (#ADC7D9), что и часть логотипа.

Нам нужно добавить легкий градиент этому слою, поэтому выполните двойной щелчок по нему, чтобы вызвать панель стилей слоя и выберите стиль Gradient Overlay. Выберите градиент, переходящий к прозрачному цвету, смените режим наложения стиля на Overlay и понизьте его непрозрачность (Opacity) до 30%.

8 Шаг

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

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

Сохраните этот файл, как шаблон (Edit > Define Pattern).

9 Шаг

Создайте новый слой поверх слоя с выноской и залейте его только что созданным шаблоном (Edit > Fill).

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

Задайте слою режим наложения Soft Light. Далее выделите панель выноски либо инструментом Rectangular Marquee Tool, либо нажатием Ctrl + Click по слою с ней. После этого, находясь в режиме Rectangular Marquee Tool, кликаем по выделенной области правой клавишей мыши, выбираем пункт Inverse, затем жмем Delete. Сейчас мы удалили ненужную часть сетки, которая выходит за пределы панели выноски.

Следующим шагом будет создание видимости сетки лишь по ширине рабочей области в 960px. Включите направляющие, если они у вас спрятаны (View > Show > Guides), затем добавьте маску к слою с сеткой.

Перейдите в режим маски нажатием соответствующей кнопки в нижней части палитры Layers, затем выберите инструмент Gradient Tool (G) и определите градиент от прозрачного к черному. С помощью градиента и маски мы уберем части сетки, выходящие за рамки центральной области 960px.

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

10 Шаг

Поместим текст на нашу выноску. Возьмите Arial шрифт, кегль 45pt (#2C2C2C) и напишите какой-нибудь слоган, выделяя значимые слова жирным начертанием. Под ним поместите текстовое введение меньшим по размеру кеглем (17pt) и сдвиньте все это в левую часть панели выноски.

11 Шаг

Сейчас будем готовить область для слайдшоу. Выберите инструмент Rectangular Marquee Tool и нанесите выделение между крайней правой и центральной направляющими. По высоте выделенная область должна составить 8 линеек по горизонтали, оставьте по одной пустой линейке сверху и снизу. Залейте этот прямоугольник темным серым цветом (#2C2C2C).

Добавьте тень к вашему фону для слайдшоу: выполните двойной щелчок, чтобы вызвать панель стилей слоя, выберите Drop Shadow, смените цвет на #2C2C2C, задайте Distance 1px и Size 10px.

Далее, в качестве слайда, на фон нужно поместить скриншот какого-нибудь сайта — не важно. Я сделал снимок экрана первого попавшегося блога, изменил его размеры ровно по размерам нашего темно-серого фона, а затем сделал отступы шириной в 10px (Select > Modify > Contract 10px, затем инвертировал выделение и удалил его содержимое нажатием Delete).

12 Шаг

Чтобы начать работать с основным разделом, нужно на фон еще добавить легкий градиент. При помощи Rectangular Marquee Tool выделите всю область, находящуюся под выноской, затем выберите Gradient Tool (G) от цвета #F0F0F0 к прозрачному и протяните градиент по направлению вниз. Не заходите чересчур далеко — фон должен переходить в #F9F9F9 к низу страницы.

13 Шаг

Добавьте вводный абзац в левую часть основного блока. Шрифт — Arial, кегль — 18 pt, цвет >#9C9C9C а цвет ссылки сделайте #A3BBCC и задайте ему подчеркивание.

14 Шаг

Добавим список услуг. Для начала оформите заголовок: Arial, 25pt, Bold, цвет #262626. Список элементов сделайте размером 18pt , шрифтом Arial #9C9C9C. Пункты списка оформите либо с помощью Elliptical Marquee Tool, либо используя альт коды (Alt + 7) с светло-голубым цветом шрифта (#A4BCCD) и выравниванием по сетке.

Добавьте любую необходимую информацию таким же путем.

15 Шаг

Правый блок основного раздела будет выводить последние новости. Сначала добавьте заголовок в том же стиле, что и предыдущий (Arial, 25pt, Bold, цвет #262626) и выровняйте его по секции предоставляемых услуг.

Теперь создайте заголовок для одной из новостей шрифтом Arial, 18pt, #A4BDCD, а само содержимое пишите размером 16pt и цветом #9C9C9C.

Напишите таким образом 3 новости, а затем поместите под ними ссылку на ленту новостей шрифтом Arial с подчеркиванием, кеглем 16pt и цветом #A4BDCD.

16 Шаг

Нашим последним блоком будет подвал, в котором будет находиться форма для ввода логина и пароля, контакты и несколько ссылок. Выделите нижнюю часть документа c помощью Rectangular Marquee Tool и залейте ее темно-серым (#262626).

Сейчас нам нужно добавить форму для ввода логина и пароля. Сначала шрифтом Arial Bold, 20pt, белого цвета сделайте соответствующую надпись в левой части подвала. Затем с помощью Rectangular Marquee Tool создайте два прямоугольника, которые будут служить полями для ввода. Назовите поля, сделав в них надписи шрифтом Arial 16pt, цвета #9C9C9C.

Повторите то же самое для кнопки отправки, только на этот раз используйте Rounded Rectangle Tool (U). Далее добавьте к этим элементам Inner Shadow, понизьте Opacity этого эффекта до 30%, выставьте Spread равным 0 и Distance — 10px. Добавьте ссылку для восстановления потерянного пароля (Arial, 13pt, подчеркнутый стиль, цвет #A4BDCD).

17 Шаг

Завершим макет добавлением блока контактов в подвале: озаглавьте его шрифтом Arial 20pt, Bold белого цвета (#FFFFFF) и выровняйте по заголовку формы для авторизации. Затем добавьте информацию для контактов простым Arial 16pt также белого цвета.

18 Шаг

Проверьте баланс и выравнивание. С помощью ваших направляющих и разлинейки проверьте: все ли находится на своих местах, все ли сбалансировано. Если нет — поправьте.

19 Шаг

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

Источник: http://photoshopworld.ru/lessons/138/

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.