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

Содержание

для чего нужен макет, и с чего начать работу

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

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

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

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

шапка;

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

навигация;

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

шрифты и т. д.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Документ

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Профессиональный макет сайта в фотошоп / Creativo.one

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

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

Набор иконок (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 пикселов.

Добавьте направляющие по обеим сторонам колонок.

Добавьте в колонки список услуг. Украсьте текст с услугами иконками.

Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.

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

Дублируйте слой с кнопкой (Ctrl + J).

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

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

Примените к этой кнопке стили слоя:

Добавьте текст.

Шаг 14. Создаем футер

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

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

Финальное изображение:

Автор урока: Niranth

Источник: photoshoptutorials.ws

Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

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

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

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

шапка;
расположение меню;
навигация;
цветовая гамма;
шрифты и т. д.

Первое что тебе нужно – концепция.

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

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

Пошаговое создание дизайна сайта в Photoshop

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

Шаг №1

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

Шаг №2

Твой макет сайте будет шириной в 960 пикселов (px). Нажми «Файл» — «Создать» (> File > New Document) или комбинацию клавиш «Ctrl+N». Поставь размер 1200х1500 пикселов и разрешение 72 пиксела. Цвет RGB, 8 бит, фон – белый.

Шаг №3

Выдели весь документ при помощи инструмента «Прямоугольная область» (> Rectangular Marque Tool) или нажми комбинацию клавиш «Ctrl+A» -она автоматически выделит всю область документа без исключений.

Шаг №4

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

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

Шаг №5

Установи линейки (направляющие) точно по границам выделения. Перетащи их вручную указателем мыши. Если у тебя в Фотошопе не включены линейки, зайди в «Просмотр» и нажми галочку напротив — «Линейки» (> View > Rulers).

Шаг №6

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

Шаг №7

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

Шаг №8

Создай новый слой и залейте выделенную область серым, используя, например, «Инструмент Кисть» (> Brush Tool) или «Инструмент Заливка» (> Paint Bucket Tool).

Шаг №9

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

Шаг №10

Примени градиент. Его можно найти также на панели инструментов или кликнув два раза мышкой по необходимому слою. На примере пошагово объяснено что за чем нужно кликать – 1. «Наложение градиента», 2. «Градиент», 3. Выбрать ваши цвета из палитры «Набор». 4. Указать желаемый угол градиента.

Шаг №11

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

Итак, продолжи. Создай новый слой (сразу его проименуй!) – «Ctrl + Alt + Shift + N»и выберите мягкую кисть, размер, например около 600 пикселов (можешь менять размеры по своем вкусу).

Шаг №12

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

Шаг №13

Кликни кистью один раз в центре шапки. Поставь прозрачность и удали потом часть пятна – разруби его, например, инструментом «Прямоугольная область» и нажмите клавишу «Delete». Слой с подсветкой сожми по вертикали и растяни (комбинация клавиш «Ctrl + T»).

Шаг №14

Чтобы отцентрировать необходимые слои – выбери их и выбери инструмент «Перемещение» (> Move Tool) или клавиша «V». На панели свойств (вверху) нажми «Выравнивание центров по горизонтали» (> Align Horizontal Centers).

Шаг №15

Создай новый слой («Shift + Ctrl + N»). Поставь карандашом (> Pencil Tool) точку. Растяни ее по горизонтали («Ctrl+T») и сгладь края градиентом как делал это ранее.

Шаг №16

Временно отключи видимость фонового слоя. Ставим там две точки инструментом «Каранадш» (Pencil Tool), размером в 2 пиксела. Жми далее «Редактирование» – «Определить узор» (Edit > Define Pattern).

Шаг №17

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

Шаг №18

Выбери далее «Регулярный» и кликни на созданный тобой узор.

Шаг №19

Выбери область как указанно на примере и примени задачу.

Шаг №20

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

Шаг №21

Далее, выделяй узор в произвольном порядке инструментом «Овальная область» (> Elliptical Marquee Tool). Применяй инверсию выделенной области и при помощи «Растушевки» (> Feather) сгладь края и удаляй ненужную область узора.

Шаг №22

Затем пишем название логотипа при помощи инструмента «Горизонтальный текст». К слою с логотипом можно также добавить стиль слоя «Тень» (>Drop Shadow), что находится в меню слоя (два раза жми кнопкой мыши на нужный слой).

Шаг №23

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

Шаг №24

Напиши название для будущих кнопок.

Шаг №25

Здесь в дальнейшем будет так званный – слайдер для контента. Выдели область размером 580х295 пикселов и помести туда любой снимок.

Шаг №26

Далее, создай визуальный эффект к слайдеру. Создай новый слой («Shift + Ctrl + N»), выбери «Кисть» (> Brush Tool) и по тому же принципу, что и с точкой – поставь точку диаметром около 400 пикселов и растяни ее (Ctrl+T).

Шаг №27

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

Шаг №28

Убираем ненужные края, чтобы смотрелось аккуратнее.

Шаг №29

Делай два новых слой и рисуй прямоугольные кнопки для слайдера. Делай их полупрозрачными.

Шаг №30

Добавь указательные стрелки инструментом «Произвольная фигура».

Шаг №31

Создай новый слой и прямоугольником выдели область внизу слайдера — инструмент «Прямоугольная область выделения» (> Rectangular Marqee Tool). Сделай ее полупрозрачной (непрозрачность — 50%). Напиши текст.

Шаг №32

Добавь описание сайта или проекта.

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

Дизайн сайта в фотошопе

Один из самых популярных редакторов, используемых при разработке дизайна сайта – это Adobe Photoshop («фотошоп»). Этот редактор позволяет добиться множества красивых визуальных эффектов, реализовать практически любую идею дизайнера.

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

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

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

Начинать создание шаблона дизайна сайта следует с создания нового документа в фотошопе. Ширина документа задается в пикселях, в соответствии с требуемым разрешением, например, 1024 пикселя. Высоту документа можно взять произвольно, ведь в браузере страница сама «растянется» по вертикали, если высота ее содержимого превышает высоту экрана. Стандартное разрешение для шаблона дизайна сайта – 72 пикселя на дюйм, цветовой режим необходимо установить в значение «RGB», 8 бит.

При помощи команды View — New guide (Показать-Новые направляющие) можно разметить страницу в соответствии с модульной сеткой. Это позволяет добиться точного совпадения размеров эскиза и конечного документа. Кроме того, можно воспользоваться уже готовыми сетками, разработанными под разные разрешения мониторов. Как правило, такие сетки предлагаются авторами совершенно бесплатно.

Следующий шаг – создание фона страницы. Фон может быть однотонным, для этого при помощи команды Paint Bucket Tool (Заливка) с установленным значением Foreground (Фоновый цвет) следует заполнить пространство документа выбранным цветом. Кроме того, фоном может служить какое-либо изображение или же узор. Узором пространство макета также заполняется при помощи команды Paint Bucket Tool, но с установленным значением Pattern (Узор).

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

Создать необходимое прямоугольное выделение можно при помощи инструмента Rectangular Marquee Tool (Прямоугольное выделение). Изменяя параметр Feather этого инструмента можно задать необходимое скругление для углов.

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

Отдельным шагом можно выделить создание кнопок и иконок для дизайна сайта. В зависимости от идеи дизайна, они могут быть строгими деловыми или же, наоборот, веселыми. Кнопки, как правило, создаются при помощи все того же Rectangular Marquee Tool. Задать кнопкам другую, непрямоугольную форму, можно с помощью инструмента Pen Tool (Перо). С помощью Pen Tool можно создавать и различные иконки произвольной формы.

Надписи на кнопках и иконках выполняются при помощи инструмента Horizontal Type Tool (Горизонтальный текст) или Vertical Type Tool (Вертикальный текст). В настройках инструмента можно задать любую необходимую гарнитуру шрифта и его размер, задать выравнивание текста.

Для дальнейшей работы над дизайном сайта, готовый шаблон необходимо разрезать на части. Это нужно для того, чтобы поместить шаблон в ячейки таблицы при html-верстке страницы. Разрезать шаблон следует с помощью инструмента Slice Tool (Раскройка). Кусочки изображения (slices) по размерам должны соответствовать элементам будущей html-страницы.

С помощью команды Save for Web&Devices необходимо сохранить разрезанное изображение. В диалоговом окне следует выбрать тип файлов HTML&images и сохранить файл с именем «index.htm» или «index.html». Теперь шаблон дизайна сайта состоит из файла index.html и каталога images, в котором находятся нарезанные кусочки макета. С помощью «Блокнота» или любого html-редактора файл index.html редактируется при необходимости.

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

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

Плагины в Adobe Photoshop – это специальные надстройки, которые дополняют редактор новыми функциями или же модифицируют уже имеющиеся. При помощи плагинов визуальные эффекты для дизайна сайта в фотошопе также можно создать всего одним кликом.

Как изменить дизайн сайта?

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

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

Как создать макет сайта в фотошопе?

Как создать полноценный макет сайта в фотошоп

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

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

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

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

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

Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:

Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте «Наложение градиента» (Gradient Overlay) с вертикальным переходом от серого цвета к белому:

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

Выделив область заголовка с маской, нажмите CTRL+SHIFT+C, чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум, чтобы создать простую текстуру, затем установите режим наложения «Умножение» и снизьте прозрачность до подходящего значения:

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

Используйте инструмент «Текст» для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:

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

Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica, чтобы текст можно было поместить в html без замены изображений:

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

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

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

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

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

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

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

Используйте эту боковую панель, чтобы разработать секцию Featured Project (Рекомендуемый проект). Ее элементы могут включать в себя небольшие снимки и отрывки текста:

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

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

Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:

Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T, чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:

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

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

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

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

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

МЛМария Логутенкоавтор-переводчик статьи «Create a Clean Modern Website Design in Photoshop»

Как делать макет сайта в фотошопе

2,365 просмотров всего, 1 просмотров сегодня

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

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

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

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

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

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

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

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

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

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

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

Создание красивого сайта – это больше чем про искусство. Это наука Usability, помноженная на опыт разработки интернет-проектов для разных тематик. Но порядок выполнения работ в Фотошопе практически одинаков.
Для начала нужно задать фон. И не обязательно рисовать картинку самостоятельно – можно скачать бесплатное изображение с любого из стоков. Не рекомендуем использовать текстуры с мелкими выделяющимися деталями: текст на таком фоне будет нечитабельным, а мелкие фрагменты отвлекут внимание пользователя от контента.
Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

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

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

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

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

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

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

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

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

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

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

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

Скачать

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

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

Photoshop-лектор: Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

шапка;
расположение меню;
навигация;
цветовая гамма;
шрифты и т. д.

Первое что тебе нужно – концепция.

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

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

Пошаговое создание дизайна сайта в Photoshop

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

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

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

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

Выбери далее «Регулярный» и кликни на созданный тобой узор.

Выбери область как указанно на примере и примени задачу.

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

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

Напиши название для будущих кнопок.

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

Убираем ненужные края, чтобы смотрелось аккуратнее.

Делай два новых слой и рисуй прямоугольные кнопки для слайдера. Делай их полупрозрачными.

Добавь указательные стрелки инструментом «Произвольная фигура».

Создание сайтов и Photoshop

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

Базовые знания по созданию дизайна в Фотошопе

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

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

Одностраничный.
Многостраничный.
Резиновый.
Фиксированный.

Если удалось создать макет на фотошопе, дальше его следует загрузить на хостинг. В ситуации, когда самостоятельно это сделать не получается, макет сайта можно отдать верстальщику. Он на профессиональном уровне сделает html шаблон. Можно воспользоваться сервисами для конвертации PSD-файла в HTML и CSS. В интернет пространстве сервисов, предлагающих подобные услуги много. Есть платные и бесплатные сервисные платформы. Популярными и простыми в работе считаются: Psd2Html Converter, HTML Panda, PSDCenter, 40 Dollar Markup.

Создание сайтов в Photoshop

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

Компания Cetera Labs предлагает создание сайта в photoshop по привлекательным ценам и на привлекательных условиях. Профессиональные сотрудники компании помогут реализовать поставлены планы и цели на высоком уровне с использованием современных технологий и актуальных решений.

Поделиться в соц. сетях:
Как создать чистый макет веб-сайта в Photoshop
Привет, ребята!
Мы являемся огромным ресурсом по веб-дизайну, и на самом деле до одного дня мы были чертовски скучными. Но мы уже над этим работаем. И будьте уверены, что сегодняшний урок принесет вам некоторые полезные навыки веб-дизайна.
Это руководство среднего уровня, в котором используется такой замечательный учебный ресурс, как бесплатные шаблоны веб-сайтов, и некоторые вещи здесь могут показаться сложными, но почему бы не попробовать? Давайте начнем 🙂
Но прежде чем мы начнем, ознакомьтесь с полезными ресурсами, которые помогут вам создать потрясающий макет веб-дизайна:
Прежде всего, посмотрите на окончательный результат нашего урока.Сегодня мы собираемся создать прекрасный макет сайта:
Чтобы создать подобный веб-макет, вы должны загрузить «Linecons Free — Vector Icons Pack»
Кстати, вы можете бесплатно скачать шаблон на основе этого дизайна: Free Business Template.
Подпишитесь на нашу рассылку, и раз в две недели получайте огромный пакет бесплатных дизайнерских материалов и полезных руководств:
Шаг 1
Начнем с самого начала. Просто запустите Photoshop и создайте новый документ ( CTRL + N ).См. Параметры ниже.
Шаг 2
Теперь вам нужно добавить узор к вашему фону.
Стиль слоя -> Параметры наложения-> Наложение узора . Посмотрите на скриншоты ниже:
Шаг 3
Мы хотим создать потрясающий дизайн, да? Вот почему мы должны использовать систему сеток для проектирования. Вы можете легко создать прочный визуальный и структурный баланс веб-сайтов с сеточным дизайном.
Поместите несколько сеток в свой дизайн с интервалом 60 пикселей и 20 пикселей.
Шаг 4
Итак … пришло время разработать меню вашего будущего веб-сайта. Используйте инструмент Прямоугольник со скругленными углами, чтобы создать его (радиус — 3 пикселя). Ширина вашего меню — 940 пикселей, высота — 34 пикселя.
Я считаю, что создать меню сайта — несложная задача. Чтобы быть уверенным, посмотрите изображения ниже:
Чтобы сделать это меню более привлекательным, перейдите в Blending Options -> Drop Shadow .Используйте настройки, которые вы видите на скриншотах:
Параметры наложения-> Внутренняя тень
Я выбрал цвет # 6bafff для этой строки меню.
Шаг 5
Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool.
Вы можете создать свой дизайн с любым шрифтом, который вам нравится. Я использовал шрифт Aller [жирный]. Размер 14px.
Шаг 6
Все кнопки меню являются ссылками, и дизайнер должен показать, как выглядит их состояние при наведении курсора.Итак, создайте прямоугольник (я использовал для него цвет # 5a90e5).
Наш результат:
Шаг 7
На каждом приличном сайте есть форма поиска. Давай тоже создадим 🙂
Используйте инструмент Прямоугольник со скругленными углами (радиус — 3 пикселя), чтобы создать форму поиска со следующими размерами: 124 пикселя и 26 пикселя
Добавьте внутреннюю тень: Параметры наложения-> Внутренняя тень
Параметры наложения-> Наложение цвета , цвет- # 5a90e5
Воспользуйтесь нашим любимым инструментом Photoshop еще раз 🙂 Создайте один прямоугольник размером 41px и 32px
Параметры наложения -> Тень
Параметры наложения -> Внутренняя тень
Параметры наложения -> Наложение цвета (цвет — # 6bafff)
Теперь пора использовать значки, которые мы скачали в начале этого урока.Откройте «Linecons Free — Vector Icons Pack» и найдите там значок поиска. Просто примените к нему несколько наворотов.
Вот наш окончательный результат для формы поиска:
Шаг 8
Социальные сети очень полезны и важны для каждого веб-сайта. Вот почему сегодня мы также узнаем, как создать простую кнопку Facebook. Снова с помощью инструмента Прямоугольник со скругленными углами (радиус — 3 пикселя) создадим кнопку
.
Затем используйте инструмент «Прямоугольник» (с закругленными углами), чтобы создать квадрат (удерживая кнопку Shift) со следующим размером — 16 пикселей
Выберите Pen Tool и отрежьте половину этого квадрата.
Edit-> Transform-> Rotate , чтобы переместить этот треугольник и поместить его в левую часть прямоугольника
Выделите все ваши слои «Facebook» и объедините их (Ctrl + E).
Параметры наложения-> Внутренняя тень:
Параметры наложения-> Наложение цвета (# c1cac5)
Теперь добавьте текст «Follow» к нашей кнопке Facebook и поиграйте с его параметрами наложения.
Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете создать букву «F», украсив ее синим цветом (# 5a90e5).
Поиграйте с параметрами наложения (добавьте белую тень)
ВАУ! Мы сделали это 🙂 Посмотрите на окончательный результат в нашей строке меню:
Шаг 9
Создайте новую форму: ширина 940 пикселей, высота 372 пикселей
Как всегда, добавляем тень:
И граница: Параметры наложения-> Обводка (20 пикселей, цвет- # 6bafff)
Шаг 10
Чтобы создать красивый слайдер, мы должны добавить к нему несколько изображений.С помощью сочетания клавиш Ctrl + Alt + G создайте обтравочную маску.
Шаг 11
Снова используйте кучу бесплатных иконок. Я выбрал следующие значки: «настройки», «пузырь», «фото», «мир»
Добавляем их в наш дизайн (не забываем использовать сетку), расстояние — 180 пикселей
Шаг 12
Добавьте текст. Вы должны использовать тот же шрифт, что и для строки меню. Установите размер шрифта 30 пикселей.
Поиграйте с параметрами наложения: добавьте белую тень, наложение цвета (# 6aaefd) и внутреннюю тень.
Скопируйте стили этого слоя и добавьте его ко всем своим значкам:
ВАУ! Посмотрите на этот потрясающий результат!
Шаг 13
Заполните эти четыре столбца (ширина каждого — 240 пикселей) некоторым текстом «loremipsum». Лучше добавить в каждый столбец свой текст.
Шаг 14
Создайте кнопку «Подробнее» с помощью инструментов, которые мы использовали ранее.
Параметры наложения-> Внутренняя тень, Падающая тень, Наложение цвета (# 919392).
Шаг 15
Добавьте текст «Читать дальше» к нашей кнопке.
Шаг 16
Теперь мы должны отделить основное содержание нашего будущего сайта. Создайте линию 1px и добавьте к ней стили вашего макета «Читать дальше».
Шаг 17
Вашим следующим блоком может быть раздел под названием «Партнеры», или вы можете захотеть продемонстрировать свои последние сообщения в блоге.
Используйте инструмент Прямоугольник со скругленными углами, чтобы создать квадрат (удерживая кнопку Shift).
Радиус — 3 пикселя, ширина и высота — 138 пикселей.
Перейдите к Параметры наложения -> Обводка , чтобы создать границу со следующими параметрами:
Размер — 20 пикселей, цвет # 919392
Скопируйте и вставьте этот элемент 5 раз 🙂 Разместите эти квадраты с интервалом 20 пикселей.
Шаг 18
С помощью обтравочной маски вставьте изображение в квадрат.
Как видите, вы действительно можете использовать этот блок для самых разных целей. Результат:
Шаг 19
Нижний колонтитул веб-сайта так же важен, как и заголовок, если не больше. Спросите себя: «Что вы хотите, чтобы ваши посетители делали, когда они достигают конца страницы?» Ответ, который вы придумаете, станет отличной отправной точкой для разработки нижнего колонтитула вашего сайта.
Пришло время создать крутой нижний колонтитул для нашего симпатичного макета веб-сайта.Сделаем ярким 🙂
Добавьте градиент, например # 3a8df1 — # 6bafff, и внутреннюю тень
Шаг 20
Мы добавим три блока в нижний колонтитул: Быстрые ссылки, О нас и Подписывайтесь на нас
Используйте шрифт Arial Regular для заголовков (30 пикселей) и добавьте стили, как на скриншотах ниже:
Используйте шрифт Arial Regular для текста в разделе «О нас» (12 пикселей).
Текст раздела быстрых ссылок — 22px.
Поместите несколько стандартных значков в раздел Follow — RSS, Google Plus + и Twitter
Woohoo! Мы сделали это! Окончательный результат нашего урока:
Как создать простой макет веб-дизайна с помощью Photoshop

Халява: бесплатный HTML-шаблон
Загрузите этот бесплатный HTML-шаблон для бизнеса здесь. А здесь вы найдете множество замечательных бесплатных веб-шаблонов. Не забывайте нажимать кнопки «Поделиться», потому что делиться — это сексуально;)
30 лучших уроков по макету веб-дизайна по Photoshop
Со временем создание макетов веб-сайтов в Photoshop становится необходимостью для каждого дизайнера.По этой причине я хочу помочь всем, кто хочет стать веб-дизайнером, представив некоторые из лучших руководств по макету веб-сайтов, сделанных в Photoshop.
Этот обзор включает в себя 30 лучших руководств по макету веб-дизайна, созданных в Photoshop : макеты портфолио, макеты для блогов, бизнес-макеты и многое другое… Я уверен, что вы узнаете несколько отличных методов проектирования, следуя любому из этих руководств.
Как создать уникальный красочный макет сайта

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

Создайте тематический веб-дизайн «Волшебная ночь» с нуля в Photoshop

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

Создайте креативный необычный макет в Photoshop

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

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

Создайте тему WordPress в стиле гранж с помощью Photoshop

Создайте макет WordPress, вдохновленный природой

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

Учебное пособие по шаблону Softblue
6
Портфолио веб-сайта Softblue
Учебник

Создание макета портфолио с деревянным фоном в Photoshop

Учебник по модному бизнесу и финансам

Учебник по макету программного обеспечения

000 Создайте креативную тему wordpress 9165
Создайте чистый и эффективный макет продукта

Макет дизайна корзины для покупок

Создайте простой современный веб-шаблон в Photoshop

Как создать веб-макет «изношенной бумаги» с помощью Photoshop

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

Макет бизнес-сайта в Photoshop

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

Учебник по веб-дизайну 904 / Шаблон портфолио!

Создание чистого макета PSD с 3D-эффектом

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

Создание расширенного макета игры или клана

Создание 9000 чистого3 904 макет хостинга

Интернет 2.0 руководство по макету в фотошопе

Руководство по дизайну блога RocknRolla

Это все на сегодня, друзья мои. Приходите завтра для другой статьи, связанной с дизайном. Или вы можете подписаться на меня в Твиттере или подписаться на мой RSS Кормить.
[Всего: 0 Среднее: 0/5]
Как создать веб-страницу в Photoshop для Dreamweaver | Small Business
Хотя Photoshop — это в первую очередь программа для создания эффектов и редактирования изображений, это также отличный инструмент для создания внешнего вида веб-страниц.С помощью встроенных инструментов Photoshop можно легко использовать для создания макетов профессионального вида, которые затем можно передать в Dreamweaver для фактической работы с кодом. Когда фактическая работа по дизайну будет выполнена в Photoshop, вы обнаружите, что сделать веб-страницу реальностью с помощью Dreamweaver не так уж и сложно.
Создайте страницу в Photoshop
Откройте Photoshop, щелкните меню «Файл» и выберите «Создать». Выберите «пиксели» в качестве единицы измерения, а затем введите желаемую ширину и высоту своей веб-страницы.Для максимальной совместимости с конечным пользователем следует выбрать ширину менее 1100 пикселей. Оставьте фон белым, установите разрешение «72» и убедитесь, что для цветового режима установлено значение «RGB Color». Нажмите «ОК».
Щелкните на инструменте «Фигуры» на панели инструментов и выберите желаемый тип формы для вашего макета. После выбора щелкните документ и перетащите его, чтобы создать форму. При необходимости повторите это с разными формами, чтобы создать макет веб-страницы. Чтобы изменить цвет или стиль фигуры после ее создания, дважды щелкните фигуру в палитре «Слои» и внесите необходимые изменения.
Добавьте желаемый текст в макет веб-страницы с помощью инструмента «Текст» на панели инструментов. Если вы не создаете логотип, вы всегда должны использовать стандартный шрифт, который очень легко увидеть, например Verdana, Georgia или Times New Roman (и это лишь некоторые из них). Когда у вас есть все слои, которые вы хотите для своей веб-страницы, дважды щелкните слои по одному, чтобы переименовать их. Это поможет вам запомнить, для чего предназначен каждый слой.
Перенос дизайна в Dreamweaver
Дважды щелкните каждую фигуру и текстовый слой, для которых включен определенный цвет, и щелкните образец цвета, чтобы просмотреть HEX-код цвета.Эти коды понадобятся вам при переносе дизайна в Dreamweaver. Когда закончите, сохраните страницу в формате Photoshop по умолчанию (PSD), а затем сохраните копию в формате JPEG. JPEG будет использоваться в качестве эталонного изображения, и вы можете использовать PSD, если хотите внести изменения.
Откройте Dreamweaver и создайте новый документ HTML. Перейдите на вкладку «Вставка», вставьте новую таблицу или DIV и установите атрибуты элемента, соответствующие тем, которые используются в макете Photoshop (например, ширина / высота и цвет фона). Ссылаясь на изображение JPEG макета веб-страницы Photoshop, введите необходимый текст в нужные места и выровняйте различные элементы, чтобы они соответствовали дизайну Photoshop.
Вернитесь к изображению в формате JPEG вашего дизайна и используйте инструмент кадрирования в Photoshop, чтобы обрезать часть изображения с логотипом. Сохраните его в папке, в которой вы сохранили HTML-файл. Вернувшись в Dreamweaver, откройте представление дизайна и щелкните в том месте, куда вы хотите вставить логотип. Откройте вкладку «Вставка» и нажмите «Изображение», чтобы вставить свой логотип на веб-страницу. Ваша страница, созданная в Photoshop / Dreamweaver, теперь готова к использованию.
Ссылки
Ресурсы
Биография писателя
Дэниел Хаттер начал профессионально писать в 2008 году.Его письма сосредоточены на компьютерах, веб-дизайне, разработке программного обеспечения и технологиях. Он получил степень бакалавра искусств в области медиа, разработки игр и информационных технологий в Университете Висконсин-Уайтуотер.
Создание веб-сайта в Photoshop
страница РЕЗЮМЕ
Как создать визуальный элемент веб-сайта в Adobe Photoshop от начала до конца.
Создавайте фоновые панели, верхний и нижний колонтитулы, ссылки на хлебные крошки, первичную и вторичную навигацию, информационные панели и, наконец, оформляйте текст соответствующим шрифтом, подходящим для веб.
Начать с документа Photoshop в формате RGB не более 990 пикселей
Когда я начинаю графический дизайн веб-сайта, я обычно создаю новый документ Photoshop шириной 990 пикселей. Это связано с тем, что 990 пикселей — это почти наибольшая ширина, которую вы можете использовать на веб-странице без неприятной горизонтальной полосы прокрутки, появляющейся в браузере Microsoft Windows, в пределах экрана 1024 x 768 пикселей (наиболее популярное разрешение экрана на момент написания).
Любой, кто использует Apple Mac, знает, что ширина окна браузера гораздо более подвижна, но поскольку пользователи Mac составляют меньшинство, дизайнер веб-сайта должен работать с (в первую очередь) с пользователями ПК — если только аудитория не известна. На базе Mac.
Итак, мой документ обычно начинается с размера 990 x 900 пикселей (рисунок 1) .
Рисунок 1 — создание файла Photoshop 990 x 900 пикселей
Еще одна важная вещь, о которой следует помнить, заключается в том, что, хотя у нас есть 990 пикселей ширины для работы, нам не так повезло с высотой.
Как видно из скриншотов (, рисунок 2, ), даже если мы увеличим разрешение экрана до 1280 x 800 пикселей, даже если мы получим намного большую ширину, доступная высота останется практически неизменной.И чем больше панелей инструментов и функций добавлено в верхней части окна браузера, тем меньше вертикального пространства мы получим.
Рисунок 2a — Windows XP с Internet Explorer 8 с разрешением 1024 x 768
Рисунок 2b — Windows XP с Internet Explorer 8 с разрешением 1280 x 800
Решите, что будет видно по прибытии, а что будет спрятано под складкой
Это означает, что есть опасность того, что ключевые сообщения будут непреднамеренно скрыты «в нижней части страницы» (что означает, что вам придется прокручивать страницу вниз, чтобы увидеть их).Но даже в этом случае мы не хотим создавать веб-сайт высотой всего 560 пикселей … мы должны найти золотую середину.
По крайней мере, вы должны стремиться к тому, чтобы ключевое сообщение веб-сайта было видно в верхней части страницы — это может означать просто заголовок и абзац, в которых говорится, что именно сайт собирается делать для посетителя. Слишком многие сайты делают ошибку, указывая на главной странице двусмысленность, заставляя посетителя догадываться, о чем этот сайт и как он может быть полезен. Чаще всего пользователь уходит, прежде чем копать глубже.
Включите только релевантное
При работе над новым дизайном сайта вы можете сходить с ума — вы сможете интегрировать в дизайн практически все (в пределах разумного), но просто убедитесь, что вы помните, что вы будете измельчать его и использовать таблицы стилей, чтобы снова собрать все это воедино. Не усложняйте эту часть работы, если вы еще учитесь.
Что касается этого сайта, я хотел, чтобы он был простым, чистым и незамысловатым, чтобы пользователь (вы) мог сосредоточиться на содержании (этом).
Я не хотел, чтобы на странице отображалось что-либо, для чего не было уважительной причины. В наши дни слишком много обучающих сайтов, похоже, существуют в основном для того, чтобы предлагать коктейль из рекламы Google и баннерной рекламы, на которые практически никогда не смотрят, не говоря уже о том, чтобы на них нажимали. По моему опыту, наиболее эффективными ссылками являются контекстуально релевантные гиперссылки, подобные той, которая ведет к этому исследованию слежения за глазами, проведенному Якобом Нилсеном, которое свидетельствует о том, как люди читают веб-страницу.
Итак, приступим к основам
Следующие шаги действительно нацелены на новичков в Adobe Photoshop, так что все вы, эксперты Photoshop, просим вас проявить терпение или перейти к следующему шагу.
Вместо того, чтобы писать руководство, объясняющее, как создавать все возможные типы дизайна, я собираюсь сосредоточиться на одном дизайне — дизайне, созданном для using-dreamweaver.com. Освоив основы, вы можете варьировать, экспериментировать и улучшать, сколько душе угодно.
Создайте документ с направляющими
Итак, для начала — создайте новый документ Photoshop, используя настройки, показанные на рис. 1 . Добавьте к документу четыре направляющих на расстоянии 10 пикселей от каждого края.Самый быстрый способ сделать это — выбрать:
ПРОСМОТР / НОВОЕ РУКОВОДСТВО…
… а затем выберите:
По горизонтали, положение 10 пикселей
Повторить по горизонтали, положение 890 пикселей
Повторить по вертикали, позиция 10 пикселей
Повтор по вертикали, положение 980 пикселей
Задайте цвет фона
Цвет фона (или узор) веб-сайта — это область, которая будет заполнять все уголки окна браузера, неиспользуемые самим сайтом, поэтому важно не делать ее слишком отвлекающей или яркой.Я выбрал темно-серый цвет, чтобы улучшить сам сайт. Для этого щелкните квадрат палитры цветов переднего плана в нижней части палитры инструментов и либо выберите свой собственный цвет из палитры цветов, либо введите следующее значение в поле в центре нижней части диалогового окна с помощью символа #: 666666 . Щелкните ОК.
В верхнем меню выберите:
РЕДАКТИРОВАТЬ / ЗАПОЛНИТЬ…
… и ниже Содержание выберите Цвет переднего плана . У вас должен получиться холст, который выглядит как рисунок 3 .Об этом позаботились.
Рисунок 3
Создание платформы веб-сайта
Я любитель закругленных углов. Я думаю, они придают веб-сайту приятный органичный вид в среде, где все резко или ужасно скошено. Но это только я. На этот раз я выбрал красивый большой скругленный угол в 20 пикселей. Для этого выполните следующие действия:
Выберите инструмент Rounded Rectangle Tool на палитре инструментов.В палитре параметров убедитесь, что выбрана кнопка « Shape Layers », а не « Paths » или « пикселей ». Это гарантирует, что будет создан красивый, редактируемый путь с заливкой, а не пустой путь или пиксельная форма. После этого в палитре параметров в поле « Radius » введите 20 пикселей. Если вы не видите поле «Радиус», вероятно, инструмент «Прямоугольник со скругленными углами» не выбран на палитре «Инструменты». Перед созданием формы выберите новый цвет переднего плана в палитре инструментов.Я использовал # 99cc33 .
Убедившись, что в меню VIEW выбрано « Snap to Guides », щелкните в верхнем левом углу холста, где направляющие пересекают друг друга, и перетащите вниз до правого нижнего пересечения направляющих, а затем отпустите. Это создаст большой прямоугольник с закругленными углами (, рисунок 4, ). Это будет фон для сайта.
Рисунок 4
Кадр 2:

Следующая панель будет светло-зеленой с падающей тенью Дизайн
TIP
всегда рекомендуется давать имена всем слоям и групповым папкам в документе Photoshop, чтобы вы не тратили часы, щелкая их все, чтобы найти тот, который вам нужен.Чтобы присвоить им имя, просто дважды щелкните имя существующего слоя или слоя по умолчанию и введите новое, более подходящее.
Теперь мы собираемся создать следующую рамку с закругленными углами, которая будет содержать основную часть сайта (контент и навигацию). Заголовок будет располагаться на фрейме фона над этим. Создайте четыре новых направляющих:
ПРОСМОТР / НОВОЕ РУКОВОДСТВО…
… а затем выберите:
По горизонтали, положение 100 пикселей
По горизонтали, положение 850 пикселей
По вертикали, положение 30 пикселей
По вертикали, положение 960 пикселей
Выберите инструмент Rounded Rectangle Tool , как и раньше, измените цвет переднего плана на # ccff99 и создайте новый прямоугольник с закругленными углами таким же образом, как и раньше, используя только что созданные направляющие в качестве границы.
релевантная ССЫЛКА
Если вы хотите сделать что-то более сложное с помощью Photoshop, это довольно просто — если вы знаете, какие кнопки нажимать.
Посетите этот урок Glass Photoshop, чтобы получить один из многих подробных уроков.
Создайте падающую тень
В палитре слоев (со светло-зеленым прямоугольником с закругленными углами все еще выделенным) нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ).Выберите Drop Shadow и введите следующие значения:
Непрозрачность = 75%
Расстояние = 0 пикселей
Спред = 0%
Размер = 10 пикселей
шум = 0%
Поскольку значение Distance равно нулю, не имеет значения, под каким углом установлена настройка освещения — это как если бы свет падал прямо над головой. Это гарантирует, что тень будет ровной, а не тяжелее с одной стороны, чем с другой.
Рама 3:

Последняя панель будет белой
Один последний прямоугольник с закругленными углами, который нужно создать — белый — с использованием трех новых направляющих в качестве границы:
По горизонтали, положение 140 пикселей
По вертикали, положение 40 пикселей
По вертикали, положение 950 пикселей
В результате получится документ, который выглядит как рисунок 5 . Теперь перейдем к деталям, таким как содержание заголовка и навигация. Не забывайте регулярно сохранять свой документ!
Рисунок 5 — наслоение фоновой панели завершено
Создать верхний и нижний колонтитулы
Для шапки этого сайта я хотел, чтобы дизайн был простым и информативным.Поскольку основное внимание на веб-сайте уделяется тому, как создать веб-сайт с помощью Dreamweaver (помимо этих предварительных руководств), казалось логичным четко указать это в заголовке сайта.
Можно слишком много внимания уделять «дизайну ради дизайна». Соблазн заполнить пустое пространство абстрактными произведениями искусства очень силен, но ему нужно противостоять, чтобы очистить сообщение. Таким образом, заголовок этого веб-сайта имеет заголовок и «цепочку ссылок», которые делают очевидным, в каком разделе находится читатель, и позволяют быстро вернуться к основной категории или домашней странице (, рис. 6, ).
Рисунок 6. Верхний колонтитул, нижний колонтитул и панировочные сухари на месте
Добавление текста в Photoshop
Чтобы добавить текст в Photoshop, просто выберите инструмент «Текст» ( Horizontal Type Tool ) на палитре «Инструменты», щелкните где-нибудь на холсте и начните печатать. Новый слой будет создан автоматически для каждого блока текста, который вы создаете. Вы можете щелкнуть один раз и ввести текст, чтобы создать неограниченный блок текста, или вы можете щелкнуть и перетащить, чтобы создать текстовое поле, которое ограничит текст в пределах определенной вами области.
Панировочные сухари
На визуальной стадии «хлебные крошки» (ссылки вверху справа) являются всего лишь ориентиром — когда придет время разделить визуализацию на пригодные для использования изображения для веб-сайта, они будут проигнорированы и позже воссозданы в Dreamweaver.
Нижний колонтитул
Старайтесь, чтобы нижний колонтитул был чистым и незагроможденным, чтобы он содержал столько информации, сколько требуется, и не более того. В зависимости от характера веб-сайта нижний колонтитул, как правило, содержит некоторые из следующих частей информации.
Мой нижний колонтитул чрезвычайно минималистичен, но именно так я и хотел для этого сайта. Как правило, в нижнем колонтитуле посетитель ожидает найти важные сведения о компании и контактную информацию, положения и условия, адрес компании и т. Д.
Основная навигация
Существует так много различных типов меню навигации, что при попытке решить, какую систему использовать, может быть немного сложно. На самом деле, принять решение несложно — я просто выбираю систему меню, с которой пользователь почти наверняка уже знаком.
релевантная ССЫЛКА
Мега-меню
Есть много других возможностей навигации, одна из которых — часто практичное Мега-меню.
Если на сайте мало страниц, чтобы включить их все в ссылки в верхней части страницы (или в верхнем левом углу под заголовком), тогда это хорошо. Пользователи Интернета обычно обращаются к верхней части сайта, чтобы найти основную навигацию, а иногда и влево для локальной навигации по тому разделу, в который они только что пришли.Опять же, это зависит от размера и характера веб-сайта, но не стоит заставлять людей слишком много думать о том, как передвигаться.
Для этого сайта я использовал кнопки в форме вкладок для ссылок на основные категории и контекстно релевантную навигацию по боковым подкатегориям для всех страниц в категории.
Создание кнопок вкладок
Кнопки вкладок на рис. 7 — это просто более закругленные прямоугольники с закругленным углом 10 пикселей.
Рисунок 7 — Закругленные углы навигации
Они расположены за панелью с белым фоном и поэтому имеют вид «вкладок».Создайте их так же, как другие закругленные прямоугольники, и привяжите их к направляющим, начиная с:
.
По горизонтали, положение 110 пикселей
Вертикально, положение 230 пикселей
Я сохраню вкладки того же темно-зеленого цвета, что и фоновая панель, за исключением активной вкладки. Если пользователь окажется на любой странице в категории «Проектирование», вкладка останется белой. Любая дополнительная локальная навигация или пояснительные примечания появятся на панели слева.
На данном этапе я не собираюсь утруждать себя созданием всех вкладок в верхней части визуального элемента, потому что я буду воссоздавать их в HTML и CSS, и мне нужно будет сделать это только один раз, а затем скопировать. Однако, если вы представляете визуализацию клиенту, вы, вероятно, захотите, чтобы она была как можно более законченной по внешнему виду, поэтому продолжайте и вставьте все нужные вкладки.
Дополнительная навигация
Панель, содержащая вторичную навигацию (вверху слева), представляет собой еще один закругленный прямоугольник белого цвета с углом 10 пикселей, расположенный по адресу:
По горизонтали, положение 160 пикселей
По вертикали, положение 60 пикселей
Я добавил к этой панели эффект слоя, чтобы придать ей зеленую обводку в 1 пиксель.Для этого выберите слой, содержащий панель. Нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ). Выберите ход и введите следующие значения:
Размер: 1px
Позиция: внутри
Режим наложения: Нормальный
Непрозрачность: 100%
Тип заливки: Цвет
Цвет: # ccff99 (щелкните цветной прямоугольник и введите «ccff99» в поле #)
Веб-сайт Тип лица
Шрифт, который я выбрал для текста на сайте, — Georgia.Я выбрал это по трем основным причинам:
Мне нравится. Хотя мне нравится чистый вид шрифта без засечек (такого как тот, который используется в заголовке), я чувствую, что простота структуры сайта действительно выделяет красивый, интересный шрифт с засечками, такой как Georgia.
Это шрифт, разработанный Microsoft для Интернета, поэтому он хорошо работает как с большими, так и с маленькими размерами.
На большинстве компьютеров установлена Джорджия. Это решающий фактор, который резко ограничивает количество шрифтов, обычно используемых в дизайне веб-сайтов.Существует множество обходных путей, таких как Flash-текст, изображения в виде текста и методы замены текста PHP, но для простоты эти альтернативы, как правило, находятся в меньшинстве в Интернете. Короче говоря, если на компьютере не установлен шрифт, используемый веб-сайтом, браузер отобразит альтернативный вариант — иногда с нежелательными результатами.
Так и есть Грузия. Я добавил имена для вкладок, выбрав инструмент «Текст», щелкнув одну из вкладок или рядом с ней и введя имя категории.Затем используйте инструмент «Перемещение», чтобы расположить его. Опять же, я планирую воссоздать этот текст в CSS — это хорошо для поисковых систем и более эффективно для времени загрузки страницы.
Выберите стиль текста
Часто упускаемый из виду этап визуального дизайна — это стилизация текста. Так многого можно добиться с помощью одной лишь типографики — это прекрасное средство, — но на многих сайтах больше внимания уделяется забавным (и в значительной степени нерелевантным) изображениям, чем тексту — предполагаемому фокусу веб-сайта.
Хотя стиль текста на этом начальном этапе разработки может быть изменен (как и все остальное!), Он помогает получить общее представление о том, как выглядят разные шрифты, размеры и цвета. Для этого достаточно просто создать текстовое поле в документе Photoshop с помощью перетаскивания (с помощью инструмента Horizontal Type Tool ) и заполнить его текстом-заполнителем. Я обычно экспериментирую со стилями для двух заголовков ( h2 и h3 ), Paragraph Text (P), Bullet Points и Links (, рисунок 8, ).
Дизайн
TIP
Текст-заполнитель
При ожидании содержимого для публикации, будь то веб-сайт или печатная брошюра, часто необходимо использовать текст-заполнитель, чтобы не задерживать процесс разработки.
Наиболее широко используемый текст-заполнитель, известный как Lorum Ipsum, впервые использовался в 1500-х годах, когда печатник взял камбуз и скремблировал его, чтобы сделать книгу образцов шрифта.
Примеры абзацев Lorum Ipsum можно создать на удобном веб-сайте Lipsum .
В дизайне (и это могло измениться в процессе сборки) я решил нарушить соглашение о цвете ссылок в ссылках внизу слева. Хотя после посещения они становятся светло-фиолетовыми, на самом деле ссылки, по которым не нажимали, становятся серыми, а не синими. Это потому, что они находятся внутри вспомогательной панели, и я не хочу, чтобы они отвлекали читателя.
Создание иллюстраций для информационных панелей
Также на рис. 8 вы увидите несколько новых панелей справа.Это вспомогательные элементы, которые в конечном итоге будут содержать дополнительную информацию, относящуюся к тексту, рядом с которым они расположены. Их очень легко создать — процесс очень похож на тот, который использовался при создании панели мегаменю.
Рисунок 8 — Стилизация текста и панелей
Для каждой информационной панели создайте прямоугольник с закругленными углами и раскрасьте его соответствующим образом. Также добавьте обводку внутри *. Дублируйте слой с фигурой в палитре слоев и раскрасьте его в белый цвет, сохранив тот же цвет внутренней обводки.
Теперь выберите переднюю белую панель, щелкнув ее миниатюру Vector mask — если все сделано правильно, вы должны увидеть, как ее путь отображается черным цветом. Выберите инструмент Direct Selection Tool (белая стрелка). Мы собираемся перетащить верхнюю часть белой панели, но снова нам нужно начать перетаскивание, щелкнув темно-серый фон, а не одну из других существующих векторных фигур.
Щелкните серый фон и перетащите рамку вокруг верхней части панели, убедившись, что все точки привязки, составляющие верхнюю часть слоя-фигуры, выбраны.Затем нажмите SHIFT + <СТРЕЛКА ВНИЗ> . Это сдвинет всю верхнюю часть панели вниз на 10 пикселей. Используйте ВВЕРХ, и ВНИЗ, стрелки, без , клавишу SHIFT , чтобы подтолкнуть точки привязки до тех пор, пока вы не будете довольны.
Наконец, используйте инструмент Text Tool , чтобы щелкнуть вверху информационной панели, чтобы добавить заголовок. Вы можете решить либо сохранить это как изображение, либо позже стилизовать его в CSS — я использовал текст, а не изображение. Для этих заголовков я добавил интереса, используя комбинацию курсива в нижнем регистре и латинского алфавита в верхнем регистре, а также убрал пробелы между словами (см. Панель footNOTE справа) — действительно простой способ придать заголовку немного забавный вид.
Готово к работе
Методы и стили, которые я использовал для создания этого дизайна, ни в коем случае не высечены в камне — смело экспериментируйте! После того, как вы поиграете с дизайном, что вам нравится, вы можете начать думать о разделении дизайна на фоновые изображения и плитки, готовые для использования в Dreamweaver — и это тема следующей статьи.
Дизайн веб-сайта в Photoshop — Конец статьи
Перейти к предыдущей статье | Перейти на домашнюю страницу | К следующей статье
Требуется обратная связь!
Присылайте любые вопросы или отзывы по адресу: feedback @ using-dreamweaver.com или оставьте его на нашей странице в Facebook.
70 руководств Использование Photoshop для создания веб-сайта
В этой статье представлено огромное количество руководств по веб-дизайну в Photoshop, которые научат вас простым эффектам, которые можно комбинировать вместе, чтобы создать отличный дизайн веб-сайта. Эти уроки идеально подходят для начинающих пользователей Photoshop, потому что они короткие и приятные. Надеюсь, вам понравится статья, и не стесняйтесь оставлять комментарии ниже.
вы узнаете, как сделать этот элегантный макет с фоном из углеродного волокна, который будет отлично смотреться в качестве целевой страницы для веб-сайта.
2) Макет дизайн-студии
В этом уроке вы узнаете, как создать макет для веб-сайта дизайн-студии. Если у вас есть какие-либо вопросы по этому туториалу, обязательно задавайте их в комментариях. Кроме того, помните, что для всех руководств доступен для скачивания psd.
3) Создайте сеть 2.0 макет в Photoshop
В этом руководстве вы узнаете, как создать очень красивый макет веб-сайта Web 2.0 в Adobe Photoshop, используя навыки начинающих. Если у вас есть какие-либо вопросы по этому руководству, не стесняйтесь задавать их в комментариях.
4) Макет блога студии акварельного дизайна
В этом уроке вы узнаете, как сделать чистый и простой макет студии акварельного дизайна для блога. Если у вас есть какие-либо вопросы по этому туториалу, обязательно задавайте их в комментариях.Кроме того, помните, что для всех руководств доступен для скачивания psd.
5) Макет корпоративного бизнеса
В этом уроке вы узнаете, как сделать чистый и простой макет студии акварельного дизайна для блога. Если у вас есть какие-либо вопросы по этому туториалу, обязательно задавайте их в комментариях. Кроме того, помните, что для всех руководств доступен для скачивания psd.
6) Как создать макет из потертой бумаги
В этом уроке вы узнаете, как создать текстурированную тему веб-дизайна из потертой бумаги, используя некоторые базовые приемы Photoshop.Дизайн включает в себя несколько бесплатных стоковых изображений, чтобы вы могли мгновенно создать красивый макет.
7) Архитектурный макет
Этот учебник научит вас создавать этот потрясающий учебник.
8) Премиум макет WordPress Photoshop
как создать шаблон WordPress. И сегодня у нас есть новое руководство, объясняющее, как создать тему WordPress премиум-класса. Для этого урока нам понадобится новый набор кистей.
9) Белый блокнот для дизайна веб-сайта.
как создать классный веб-сайт, используя классную текстуру бумаги.
10) Создание профессионального веб-макета журнала
В этом руководстве показано, как создать веб-макет журнала. Мы также обсуждаем, на что нужно обращать внимание, а на что следует игнорировать.
11) Создание профессионального веб-макета журнала
В этом руководстве вы узнаете, как создать макет в стиле портфолио для вашей галереи дизайн-студии.Если у вас есть какие-либо вопросы по этому туториалу, обязательно задавайте их в комментариях. Кроме того, помните, что для всех руководств доступен для скачивания psd.
12) Создание профессионального веб-макета журнала
В этом руководстве вы узнаете, как создать макет в стиле портфолио для вашей галереи дизайн-студии. Если у вас есть какие-либо вопросы по этому туториалу, обязательно задавайте их в комментариях. Кроме того, помните, что для всех руководств доступен для скачивания psd.
13) Веб-шаблон в темном стиле
Еще один урок от hvdesigns, в этом уроке я покажу вам, как создать гладкий макет в темном стиле.
14) Учебник по чистому бизнес-макету
Отличный учебник по созданию чистого бизнес-макета.
15) Веб-страница Creative Studio
В этом подробном руководстве мы узнаем, как создать впечатляющий макет для Creative Studio.
16) Веб-страница Creative Studio
В этом уроке Photoshop вы узнаете, как создать красивый макет портфолио.
17) Создайте чистый и красочный веб-макет в Photoshop
В этом уроке вы узнаете, как создать чистый корпоративный макет в Photoshop.Оригинальный макет был создан кунтизом из Theme Forest.
18) Макет студии дизайна # 2
В этом уроке я покажу вам, как создать элегантный макет студии дизайна.
19) Создание веб-шаблона профессиональной студии дизайна в Adobe Photoshop
Создание веб-шаблона профессиональной студии дизайна в Adobe Photoshop
20) Создайте уникальный шероховатый макет веб-сайта
Из этого туториала Вы узнаете, как создать классный безобразный макет веб-сайта.Наряду с описанием различных техник Photoshop, он описывает общие принципы дизайна и предоставляет указатели для ваших собственных дизайнов в стиле гранж.
21) Современный веб-макет Web 2.0
В этом руководстве вы научитесь создавать современный веб-макет в стиле Web 2.0 с нуля.
22) Элегантный макет веб-сайта
В этом уроке будет показано, как создать простой дизайн веб-сайта в Adobe Photoshop, дизайн изначально был создан mjwalsh.
23) Создайте элегантный шаблон Photoshop (PSD) для WordPress
В этом уроке вы узнаете, как создать темный элегантный дизайн веб-сайта.
24) Яркий красочный веб-макет
Это довольно мало для учебника по веб-макету в Photoshop, всего лишь 18 шагов для создания красивого яркого макета.
25) Полный веб-дизайн Photoshop — Журнал
В этом уроке мы рассмотрим полный дизайн фотошопа веб-сайта журнала / личного типа.
26) Онлайн-фото портфолио
Из этого туториала Вы узнаете, как создать чистый макет для вашего портфолио.
27) Рисованные от руки макеты — самые популярные тенденции дизайна
Классный учебник о том, как создать классный учебник, нарисованный от руки.
28) Стильный веб-макет WebStudio
Учебное пособие по созданию стильного веб-макета WebStudio
29) Сеть 2.0 векторный макет
Учебник по созданию классного векторного макета.
30) Городская планировка, идеально подходящая для компании веб-дизайна
Очень крутое руководство для очень крутой компании, занимающейся веб-дизайном.
31) Веб-макет портфолио
В руководстве показано, как создать веб-сайт портфолио, чтобы продемонстрировать свою работу.
32) Макет 3D Studio — Макет портфолио
В руководстве показано, как создать веб-сайт-портфолио, чтобы продемонстрировать свою работу.
33) Веб-макет Sound System Studio
В этом руководстве вы узнаете, как создать красивый макет.
34) Как создать веб-дизайн в стиле гранж в Photoshop
Photoshop часто является правильным инструментом для веб-дизайна, особенно если вы создаете дизайн с использованием множества изображений и эффектов кисти. В этом уроке я покажу вам, как создать законченный дизайн домашней страницы в стиле гранж. Мы разработаем верхний колонтитул, боковую панель, текст, нижний колонтитул и стилизуем все, чтобы они работали вместе, создавая сильно текстурированный и потертый дизайн.
35) Создайте элегантный высококачественный веб-дизайн с нуля
В этом уроке мы создадим высококачественный веб-дизайн, используя четкий тонкий шрифт, великолепные фоновые изображения и разумное использование пространства. и макет. Вы можете легко использовать эту технику для создания собственных уникальных дизайнов.
36) Дизайн сайта блога
Photoshop часто является правильным инструментом для веб-дизайна, особенно если вы создаете дизайн с использованием множества изображений и эффектов кисти.В этом уроке я покажу вам, как создать законченный дизайн домашней страницы в стиле гранж. Мы разработаем верхний колонтитул, боковую панель, текст, нижний колонтитул и стилизуем все, чтобы они работали вместе, создавая сильно текстурированный и потертый дизайн.
37) Создайте в Photoshop нарисованный фон, вдохновленный природой
Отличный урок, который покажет вам, как создать отличный крутой уникальный макет фотошопа.
38) Создание темного веб-дизайна с нуля
В этом руководстве рассматриваются ключевые области, на которых следует сосредоточиться при создании дизайна веб-сайта.Это дизайн в стиле блога, но методы и стратегии, использованные в этом дизайне, могут быть применены и в других местах в Интернете. Узнайте, как создать красочный дизайн на темном фоне.
39) Черный стильный учебник
Этот урок Photoshop покажет вам, как создать стильный макет.
40) Макет студии дизайна — макет WordPress
Это учебное пособие № 163. В этом учебном пособии вы узнаете, как создать простой макет портфолио дизайнера.
41) Professional Modern Web Layout
Учебное пособие, которое проведет вас через процесс создания Professional Modern Web Layout.
42) WordPress Mockup Layout
Замечательные уроки по макету макета на сайте WordPress psd.
43) Макет фотографа — Макет портфолио
Макет портфолио для фотографа.
44) Макет корзины покупок для мобильного телефона
Как создать еще один вид макета веб-сайта корзины покупок.
45) Макет дизайна интерьера
Он покажет вам, как создать макет дизайна интерьера.
46) Funky Web Design Layout
Учебное пособие, как создать красочный модный дизайн веб-сайта.
47) Векторный макет — векторный макет в стиле гранж
Отличный учебник с использованием инструмента «Перо» и кистей фотошопа для создания векторного макета в стиле гранж.
48) Создание собственной веб-страницы портфолио
В этом уроке мы научимся создавать красивую персональную веб-страницу портфолио.
49) Студия дизайна веб-сайтов
Пошаговое руководство по созданию профессионального веб-макета.
50) Студия дизайна веб-сайтов
Пошаговое руководство по созданию профессионального веб-макета.
51) Макет агентства дизайна
Учебник по макету дизайна, в котором вы научите и покажете несколько полезных приемов.
52) Макет агентства дизайна
Учебник по макету дизайна, в котором вы научите и покажете несколько полезных приемов.
53) Макет веб-страницы портфолио фотографий
Из этого туториала Вы узнаете, как создать чистый веб-макет для вашего портфолио.
54) Как создать гладкий и текстурированный веб-макет в Photoshop
В этом руководстве по веб-дизайну Photoshop вы узнаете, как создать полный макет веб-страницы, сочетающий гладкий и текстурированный внешний вид с использованием сочетание от начального до среднего уровня техники Adobe Photoshop.
55) [Учебное пособие] — Создание элегантного макета блога в Photoshop
Вот окончательный результат того, как создать простой элегантный макет блога.
56) Создайте тематический веб-дизайн «Волшебная ночь» с нуля в Photoshop
Художественный веб-дизайн, изображающий концепцию «Волшебной ночи».
57) Текстура бумаги Photoshop с нуля, затем создайте с ее помощью безобразный веб-дизайн!
Учебник по созданию простой текстуры бумаги с нуля в Photoshop, а затем объединению ее с веб-макетом для создания аккуратного дизайна.
58) Создайте яркий современный дизайн блога в Photoshop
Более подробно изучив мир веб-дизайна, в этом руководстве будет рассмотрен процесс создания яркого и красочного современного макета блога в Adobe Photoshop. Начиная с чистого холста, мы рассмотрим процесс создания всей структуры и эффектов с нуля.
59) Первое руководство по веб-дизайну!
Действительно простой и понятный урок для начинающих пользователей Photoshop.
60) Учебник по веб-дизайну в Photoshop
Узнайте, как создать идеальный веб-сайт с помощью Adobe Photoshop.
61) Graphic Design Studio Web Layout
В этом руководстве вы узнаете, как легко создать макет с прозрачными кнопками. Этот тип макета использовался очень часто, потому что это последняя тенденция в дизайне веб-сайтов. Для начала я покажу вам, как создать красочный фон, а затем преобразовываю этот фон в красивый макет.
62) Создание бизнес-макета web 2.0
В этом уроке я покажу вам, как создать web 2.0 бизнес-макет.
Для начала вам нужно создать новый документ в Photoshop.
63) Элегантный и современный макет портфолио
В этом уроке вы узнаете, как создать красивый макет портфолио за несколько шагов.
64) Игровая раскладка # 3
Узнайте, как создать фантастически выглядящую игровую раскладку, и вы не будете разочарованы.
65) Элегантный макет веб-сайта
В этом уроке я покажу вам, как создать простой дизайн веб-сайта в Adobe Photoshop, дизайн изначально был создан mjwalsh.
66) Портфолио фотографий
Потрясающий дизайн портфолио фотографий с множеством блоков содержимого и привлекательным внешним видом.
67) Учебное пособие по шаблону хостинга
Учебное пособие, которое проведет вас через создание макета для хостинговой компании.
68) Веб-макет в стиле рабочего стола
Учебное пособие по созданию уникального макета рабочего стола.
69) Архитектурное бюро Макет / Веб-сайт недвижимости
Простое руководство, дающее отличный конечный результат.
70) Технический макет хостинга
Он показывает вам, как создать еще один макет для хостингового бизнеса.
Теги сообщений
Уроки Photoshop для создания веб-сайтов
Для тех из нас, кто занимается разработкой веб-страниц , одна область ресурсов, которые всегда оказываются бесценными в нашем арсенале дизайна, — это учебных пособий . Изучение того, как другие веб-дизайнеры создавали свои проекты и на какие инструменты они всегда полагаются, всегда может помочь нам в разработке или оттачивании собственных навыков.Поэтому мы ищем в Интернете полезные руководства. Что ж, сегодня мы искали вас.
Учитывая, что Photoshop — одна из самых мощных и популярных графических программ для проектов, связанных с веб-дизайном , мы решили сосредоточить наше внимание на этом направлении поиска. И наш поиск дал удивительно информативные результаты! Разделенные на две страницы, мы собрали небольшую горстку отличных руководств по Photoshop для создания веб-сайта . Мы надеемся, что они вам так же пригодятся, как и мы.
Проектирование Интернета
Создание современной лабораторной темы Веб-дизайн в Photoshop
Этот урок от Design Instruct покажет вам, как создать элегантный и современный веб-макет с помощью Adobe Photoshop. Этот процесс приведет вас от поиска источников вдохновения к настройке документа в Photoshop и созданию элементов дизайна, соответствующих теме веб-макета. Он также дает вам несколько практических примеров того, как использование смарт-объектов в проекте веб-дизайна может улучшить ваш рабочий процесс и сэкономить ваше время.
Другие важные уроки, извлеченные из этого руководства:
Работа с сеткой 960
Настройка сетки Photoshop
Создание узоров в Photoshop
Использование прямоугольника
Установка стилей слоя
Использование ярлыков Photoshop
Использование пера
Работа со слоями и группами
Работа с клипсирующими масками
Создайте профессиональную чистую тему блога сообщества в Adobe Photoshop
В этом уроке от Webdesign Tuts + вы узнаете, как простые и понятные методы дизайна могут создать чистую тему блога сообщества в Photoshop.Несколько методов, обсуждаемых в этом руководстве, включают использование правильного интервала, типографики, цветов и визуальной иерархии.
Другие важные уроки, извлеченные из этого руководства:
Установка линеек и направляющих
Использование прямоугольной области
Создание и использование градиентов
Установка стилей слоя
Идеальное расстояние между пикселями и детализация
Как создать стильное портфолио Концепция веб-дизайна
Это руководство из блога.SpoonGraphics проведет вас через создание веб-сайта с красивым и чистым макетом с использованием контрастной области заголовка для привлечения внимания пользователя. В остальном концепция оформлена с использованием крупной типографики и тонких деталей элементов интерфейса. Вы будете использовать различные эффекты, режимы наложения и стили слоя для создания всех детализированных элементов дизайна.
Другие важные уроки, извлеченные из этого руководства:
Использование режимов наложения для прозрачности
Создание тонких теней
Использование наложения рисунков
Создание кнопки с использованием стилей слоев
Использование инструмента деформации для создания реалистичных теней
Создание чистого мебельного веб-сайта и макета галереи в Photoshop
В этом уроке от Designzzz вы научитесь создавать минималистичную, но многофункциональную галерею мебели с узорчатым фоном.
Другие важные уроки, извлеченные из этого руководства:
Использование нестандартных форм
Использование обтравочных масок для создания изображений с закругленными краями
Использование непрозрачности для дисперсии
Использование инструмента «Прямоугольник со скругленными углами»
Использование инструмента эллиптической области
Создание шероховатого веб-макета газеты в Photoshop
Это руководство от Bloom Web Design — отличное руководство для начинающих, которое проведет вас через процесс создания простого, но эффективного веб-макета.
Другие важные уроки, извлеченные из этого руководства:
Создание шероховатой текстуры бумаги
Использование инструмента эллипса
Использование линейок и направляющих линий для выравнивания значков
Использование параметров наложения
Использование сетки пера
Создайте чистый, минималистичный дизайн веб-сайта в Photoshop
В этом руководстве от Visual Swirl вам будет показано, как создать чистый, минималистичный дизайн веб-сайта, используя некоторые простые методы в Photosop.Этот открытый макет хорошо подходит для демонстрации изобразительного искусства, поскольку работа будет выделяться на фоне минималистичного дизайна.
Важные уроки, извлеченные из этого руководства:
Использование различных стилей слоя
Использование сетки 960 для размещения элементов
Использование пера
Использование точки привязки преобразования для получения более плавных кривых
Использование кисти
Использование масок слоя
Использование инструмента градиента
Использование настроек изображения для уменьшения насыщенности
Обрезка с помощью инструмента выделения
Создайте потрясающее 3D портфолио с темным макетом в Photoshop
В этом уроке от 1stWebDesigner вы узнаете, как создать резкий трехмерный дизайн портфолио, используя простые градиенты и другие эффекты, чтобы добавить глубины и многослойности.Используя темные цвета и создавая соответствующие элементы, чтобы легко собрать это портфолио, этот урок, безусловно, стоит пройти.
Другие важные уроки, извлеченные из этого руководства:
Использование сетки 960 для макета
Использование градиентных наложений, падающих теней и внутреннего свечения для глубины
Использование линейок и направляющих для выравнивания элементов макета
Использование прямоугольной области
Использование параметров наложения
Использование инструмента «Прямоугольник со скругленными углами»
Создайте элегантный темный веб-сайт мобильного приложения
В этом руководстве среднего уровня от Webdesign Tuts + вы пройдете процесс создания веб-сайта с впечатляющим интерфейсом, основанным на продвижении мобильного приложения.Использование широкого спектра техник, включая формы, текстуры, маски, пользовательские значки, типографику и многое другое, которые можно легко адаптировать и применить к вашим собственным веб-дизайнам.
Другие важные уроки, извлеченные из этого руководства:
Использование пользовательских сеток Photoshop для повышения точности макета
Использование масок слоя, градиентов и непрозрачности для создания отражений изображения
Использование кисти для воспроизведения реалистичного источника света
Использование размытия по Гауссу для эффекта рассеянного света
Использование стилей слоев
Использование инструмента «Прямоугольник со скругленными углами»
Использование инструмента эллипса
Как создать винтажный файл Photoshop
Этот туториал из PSD-файлов.com научит вас создавать чистый, простой винтажный макет веб-сайта в Photoshop. Используя несколько готовых винтажных PSD-файлов, чтобы завершить внешний вид и стиль дизайна, этому уроку легко следовать.
Важные уроки, извлеченные из этого руководства:
Использование текстур фильтров для создания тонких фоновых эффектов
Использование прямоугольника
Использование пера
Использование инструмента эллипса
Использование размытия по Гауссу для затенения и глубины
Использование стилей слоев
Создайте профессиональный Интернет 2.0 Планировка
В этом промежуточном руководстве от PSD Tuts + вы пройдете чрезвычайно подробный пошаговый процесс создания макетов Web 2.0 с использованием различных техник Photoshop. Учитывая уровень детализации, направленный на то, чтобы сделать этот макет сияющим, этот урок довольно длинный, но полностью стоящий.
Важные уроки, извлеченные из этого руководства:
Использование сетки 960
Использование линейок и направляющих для выравнивания
Использование наложения градиента
Использование масок слоев и градиентов для создания отражений изображения
Использование инструмента бесплатного преобразования
Использование различных стилей инструмента выделения для детали
Использование инструмента нестандартной формы
Использование инструмента «Прямоугольник со скругленными углами»
Использование обрезных масок
Использование наложения цвета
Подробнее на второй странице
Мы уже на полпути, так что не останавливайтесь, на второй странице поста еще гораздо больше информации!
Дизайн 101: Photoshop для веб-дизайна не просто устарел… это плохая практика
Кайл Кристенсен
Кайл — ведущий графический дизайнер Red Branch Media.
# design101
Жил-был день, когда Photoshop был идеальным местом для зарождения всего вашего творчества в веб-дизайне. Да, тот день, когда вы могли конвертировать эти волшебные PSD в HTML. Но тот день давно прошел. Если вы планируете создать веб-сайт с помощью Photoshop, позвольте мне поделиться несколькими причинами, по которым этого не следует делать и почему это просто плохая практика. Не поймите меня неправильно; Photoshop — отличная программа с потрясающими возможностями. Хотя вы все еще можете создавать веб-ресурсы, такие как изображения, вам не следует использовать их для создания веб-страниц.Продолжайте читать, и я могу гарантировать, что вы со мной согласитесь.
День PSD
Создание веб-сайта в Photoshop когда-то было хорошей идеей… в 2003 году. Тогда; он работал хорошо, потому что вы могли точно видеть, как будет выглядеть ваш сайт.
Процесс был простым и эффективным. Вот типичный рабочий процесс, спасибо Treehouse:
Создайте в Photoshop макет с высокой точностью до пикселя, точно так, как вы хотите, чтобы ваш сайт выглядел.
Используйте инструмент нарезки, чтобы разделить изображения вашего веб-сайта, а затем экспортировать их в Интернет.
Напишите HTML и CSS, используя изображения, экспортированные из Photoshop.
Легко, правда? Это работало настолько безупречно, что дизайнер мог создать макет всего веб-сайта, передать его веб-разработчику, а затем разработчик написал код. Всего за несколько шагов ваш сайт будет запущен.
PSD в HTML: почему он устарел
Так почему я не могу просто следовать описанному выше рабочему процессу? Ответ: Интернет быстро меняется.Проблема с PSD в HTML заключается в том, что вы проектируете с фиксированным разрешением. В настоящее время Интернет полностью адаптивен, а это означает, что веб-сайт должен «… реагировать на поведение и среду пользователя в зависимости от размера экрана, платформы и ориентации». Поскольку среда Photoshop статична, невозможно узнать, как она будет работать и как она будет действовать в Интернете, пока она не будет действительно разработана. В статье блога Smashing Magazine говорится: «Никакие исправления или взломы не приведут к точному совпадению с нашей композицией Photoshop.”
Если вы не разрабатываете адаптивный веб-сайт, вы упускаете все преимущества. Ознакомьтесь с инфографикой, опубликованной Шалаиной Окасио: «Будьте мобильны и отзывчивы… Или иди домой!» [Инфографика]
Как использовать Photoshop сейчас
Конечно, вы можете создать веб-сайт в Photoshop на основе общей идеи, но в долгосрочной перспективе это приведет к потере времени только в том случае, если вы сделаете его идеальным по пикселям. Я предлагаю вам, если вы абсолютно хотите включить Photoshop в свой процесс веб-разработки, вместо этого используйте его как инструмент.Что касается веб-дизайна, вы можете быстро набросать несколько интересных идей за несколько минут, которые вы хотели бы представить своему веб-разработчику, но в конечном итоге они будут теми, кто скажет вам, действительно ли это осуществимая идея или нет. Вы также можете использовать Photoshop для создания ресурсов для веб-сайтов, таких как разработанные изображения, GIF-файлы, реклама и т. Д. Это позволит более эффективно использовать ваше время, так что ваш разработчик может просто вставить ваши элементы в макет.
(Изображение предоставлено: веб-сайт Sketch)
Представляем Sketch: преемник Photoshop
Так что, если вы действительно любите веб-дизайн, но ваши навыки веб-разработки и программирования все еще находятся на низком уровне? Позвольте мне познакомить вас с современным преемником Photoshop, готовым к адаптации; Эскиз.С помощью Sketch вы можете создавать адаптивные веб-сайты для современной эпохи веб-дизайна. Более того, вы можете использовать Sketch для других вещей, например, для разработки интерфейсов или векторной иконографии. Это довольно круто. Еще не убедили? Что, если бы я сказал вам, что вы можете предварительно просмотреть свои проекты в реальном времени прямо на вашем iPhone, iPad или в веб-браузере? Да, Sketch тоже может это сделать.
Даже дизайнер Сара Парментер (@sazzy) показала свою любовь к Sketch: «Я люблю Sketch. Я переключился некоторое время назад и не оглядывался назад.Я был сторонником Photoshop на протяжении всей моей рабочей жизни, пока не появился Sketch, и за неделю я полностью перешел на него ».
В конце концов, хотя веб-дизайн Photoshop ушел в прошлое, вы можете не сомневаться, что есть лучшее решение, которое займет его место. Это решение — Sketch. Не тратьте время на создание веб-сайтов для Photoshop, это принесет вам только неудачи. Вместо этого используйте Photoshop в качестве инструмента для создания веб-ресурсов , таких как изображения, GIF-файлы, реклама и другие элементы для вашего разработчика.Попробуйте Sketch. Это возможность бросить вызов самому себе, чтобы стать лучшим дизайнером, изучив новую программу веб-дизайна. Современная и практичная программа для веб-дизайна. Не упускайте возможность упустить вас!
Кайл Кристенсен
Кайл — ведущий графический дизайнер Red Branch Media.
Кайл возглавляет наш отдел графического дизайна в Red Branch Media. Его способность управлять входящими задачами, сотрудничать с командой дизайнеров, уложиться в сроки и поддерживать нашу систему хранения файлов в порядке, помогли сформировать то, что клиенты сегодня любят в отделе дизайна.Пока он находится вдали от филиала, он проводит время, играя на барабанах, в видеоигры, проверяя последние эмо-, поп-панк и скримо-песни на Spotify, распивая местный напиток Омахи и наслаждаясь жизнью с женой. Кайл имеет степень бакалавра искусств со специализацией в графическом дизайне и незначительную степень по истории искусства в UNO.
.

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

для чего нужен макет, и с чего начать работу

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

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

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

Документ

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

Веб-дизайн. Быстрый старт

Профессиональный макет сайта в фотошоп / Creativo.one

Шаг 1. Mockup

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

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

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

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

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

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

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

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

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

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

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

Шаг 14. Создаем футер

Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

Первое что тебе нужно – концепция.

Дизайн сайта в фотошопе

Теги:

Как создать макет сайта в фотошопе?

Как создать полноценный макет сайта в фотошоп

Как делать макет сайта в фотошопе

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

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

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

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

Продолжение

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

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

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

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

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

Группы

Верхнее меню

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

Логотип

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

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

Контент

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

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

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

Скачать

Photoshop-лектор: Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

Первое что тебе нужно – концепция.

Создание сайтов и Photoshop

Базовые знания по созданию дизайна в Фотошопе

Создание сайтов в Photoshop

Как создать чистый макет веб-сайта в Photoshop

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Шаг 6

Шаг 7

Шаг 8

Шаг 9

Шаг 10

Шаг 11

Шаг 12

Шаг 13

Шаг 14

Шаг 15

Шаг 16

Шаг 17

Шаг 18

Шаг 19

Шаг 20

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

Халява: бесплатный HTML-шаблон