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

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

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

1. Набор иконок (wefunction.com)
   Альтернативный набор иконок
2. Иконка Twitter (iconeden.com)
3. Шрифт 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

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

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

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

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

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

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

На появившейся вверху панели жмём кнопку Зеркальный градиент, выбираем цвет на палитре левее.

Используя инструменты открывшегося окна Редактор градиентов, выбираем нужные цвета. Чтобы задать точный цвет контрольной точки, щёлкните на ней, нажмите кнопку Цвет и в окне палитры цветов укажите его в формате RGB, HSB, CSS или любом другом из доступных.

В результате манипуляций градиент получился следующим.

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

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

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

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

Сохраняем его отдельным графическим файлом шириной в 1 пиксель, как делали это с подложкой.

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

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

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

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

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

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

20. Прописываем текст в основной части страницы, используя всё тот же инструмент Горизонтальный текст.

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

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

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

26. Результатом сего действа и стал ещё простой, но уже нормально выглядящий шаблон сайта.

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

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

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема — создание дизайна сайта в 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!

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

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

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

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

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

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

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

Создавая новый документ в 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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cоздание макета сайта без специфичных навыков в Photoshop

Для начала задумайтесь над тем, почему вы решили создать макет сайта самостоятельно. Эта работа требует разносторонних знаний от человека в области ИТ и дизайна, аналитического и творческого мышления одновременно. А еще некой части вашего времени. Окей, есть 4 причины того, почему вам могло это понадобиться. Если у вас другая – пишите в комментарии, дополню.

Причина #1. Интерес к разработке макетов сайта

Ваши интересы очень специфичны? Мы здесь никого не осуждаем. Самим же стало когда-то интересно, и начали этим заниматься! К тому же, тяга к познанию – наша отличительная черта. Хвалю ваше любопытство.

Причина #2. Разработка макета сайта как вид заработка

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

Кстати, работа веб-дизайнера – это не шутки. Вот здесь ниже я просто оставлю график зарплат в зависимости от стажа (по данным DOU за май-июнь 2016). Ни на что не намекаю. Просто скрытый хантинг.

Причина #3. Составление ТЗ на разработку макета сайта для дизайнера

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

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

Причина #4. Вам срочно надо нарисовать макет сайта, а вы даже не знаете что это

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

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

Этап 1: структура макета сайта

Обязательно заранее спланируйте архитектуру сайта – что и куда будет вести и как будут взаимосвязаны элементы. Можете сделать это в голове, на бумаге или воспользуйтесь MindMap для построения структуры. Построение MindMap при проектировании сайта поможет вам определиться с количеством страниц, которые необходимо нарисовать. Вы будете иметь детальное представление о проекте в целом. Как это сделать? Можете использовать онлайн-инструменты MindMup или Bubblus.

Удобно также пользоваться приложением Coggle, которое вы можете подключить к Google Drive.

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

На первом этапе проектирования макета создается mind-map сайта

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

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

Пример структуры сайта: вот.

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

 

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

Обычно я пользуюсь двумя наиболее популярными онлайн-инструментами для создания прототипа сайта: Moqups и Mockflow. В обоих случаях есть возможность создавать прототипы бесплатно, но с ограниченным функционалом. Тарифы для первого сайта начинаются от $13/мес. (10 проектов, 1 Гб), а для второго – от $14/мес. (неограниченное количество проектов + 25 Гб в облаке). Еще все рекомендуют Mockingbird. И я порекомендую, но только из уважения к Eminem, потому что здесь 3 проекта обойдутся уже в $12/мес., а бесплатных инструментов меньше.

Теперь о личном впечатлении. Moqups удобнее и интуитивно понятен даже с первого посещения. Здесь много готовых блоков и иконок – как раз то, что нужно, чтобы быстро пройти этап прототипирования. Кроме того, элементы удобно центрировать относительно середины страницы или других элементов. Немного мешает ограничение в 300 объектов для страницы в бесплатном режиме – для макета одностраничного сайта может быть маловато. Есть возможность вставлять элементы с воркфрейма Bootstrap. Mockflow позволяет делать чуть меньше, и с ним нужно пару минут разобраться и привыкнуть к нему, однако большее количество пространства на диске может кого-то привлечь.

Прототипы сайта в Moqups и Mockflow

Как запрототипировать будущий сайт?

Рассмотрим на примере Moqups как можно создать прототип страницы с текстом для блога.

Шаг 1. Добавляем шапку (текст можно изменить).

Шаг 2. Добавляем блок для картинки и надпись (заголовок статьи). С помощью стилей можно удобно менять размер, шрифт и прочее форматирование текста.

Шаг 3. Добавляем текст и задаем ширину колонки. Все блоки удобно центрируются относительно середины страницы.

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

Шаг 5. Добавим сайдбар (боковую колонку), здесь уже будет просто. Разместим поле для поиска и блок для подписки на рассылку (с привлекательной картинкой и яркой кнопкой).

Шаг 6. Допустим, наша статья получилась такой маленькой. Еще можно добавить опрос и рейтинг статьи. Получился аккуратный прототип странички для блога. Добавляйте другие элементы по своему вкусу.

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

Прототип приложения для смартфона

Этап 3: Делаем красивый макет сайта: выбираем цвет

От удачного выбора цветов зависит восприятие сайта и бренда пользователями. Не советую полагаться на свои силы – подбор удачного оттенка может занять часы. Поэтому рекомендую использовать готовые палитры цветов для веба. У Google недавно вышел подробный гайд по удачным цветам для материального дизайна (тренд веб-дизайна). Эти цвета гармонично сочетаются, и вы можете быть уверены в их привлекательности. С помощью Materialpalette можно удачно подобрать два цвета – основной и акцент, а также посмотреть, как они будут выглядеть в интерфейсе. Немного больше цветов на Material Design Colors.

Представили сайт? Сделали прототип? Выбрали цвета? Теперь можно перейти к созданию самого макета. Предлагаю вам несколько способов.

Внимание! Здесь не будет советов по тому как сделать макет сайта в фотошопе – это тема для отдельной статьи, здесь более простые способы.

или существующих сайтов

Этот способ подойдет вам, если вы хотите:

• разобраться в основных инструментах Photoshop;
• найти разные референсы для своего будущего сайта и собрать их воедино;
• почувствовать себя дизайнером на пару часов;
• продемонстрировать веб-дизайнеру или агентству (например, нам 🙂 наиболее подробное видение сайта;
• подкрепить ТЗ на разработку сайта не только «вот здесь кнопочки призыва, а тут разделитель и лидомагнит».

Плюсы такого подхода к разработке макета:

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

Минусы:

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

Как это делается

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

! Если вы будете делать «рагу» из разных сайтов, не забывайте где-то в блокнотике карандашиком писать исходники. Это упростит дальнейшую разработку дизайна и верстку макета.

Макеты сайтов под WordPress

Наиболее популярная CMS — это WordPress. Например, здесь вы найдете много современных шаблонов для этой CMS. Зачем? Сайт на шаблоне ускоряет запуск проекта в разы, однако он не будет уникальным. Хотя, если вы будете использовать оригинальные иллюстрации, изображения и креативный подход – даже шаблонный макет можно переделать до неузнаваемости. Главным преимуществом является то, что ваш сайт гарантированно будет адаптивным и вообще красавцем в плане отображения на разных устройствах.

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

Что дальше? Подбираем размер макета сайта, режем и клеим

Когда вы уже освоились в шаблоне, можно приступать к его нарезке. Отлично, если разрешение вашего экрана 1920 рх или больше – это позволит просто делать скриншоты частей сайта и соединять их в редакторе. Работа с макетом начинается с шапки (header), далее – разные блоки (body), в конце – подвал (footer).

Вам понадобится:

• удобный инструмент для снимка выбранной области (screen capture tool), я использую Lightshot – он предлагает сохранить изображение в отдельный файл или копирует его в буфер обмена;
• Photoshop – для склеивания нарезанных частей изображений.

Этапы создания макета для сайта на основе шаблона

Шаг 1. Выбираем ширину макета сайта

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

Откройте Photoshop и задайте ширину макета сайта 1920 рх. Этого будет достаточно для того, чтобы увидеть, как сайт будет выглядеть в браузере. Если у вас разрешение меньше – ставьте такую ширину, которую позволяет монитор. Насчет высоты пока не беспокойтесь – здесь сложно угадать и все равно придется растягивать/сужать область.

Шаг 2 . Продолжаем создание макета сайта в Photoshop

Подберите в шаблоне такую шапку, которая вам нравится. Вырежьте ее с помощью удобного инструмента, откройте документ в Photoshop и вставьте туда (Ctrl+V). С помощью инструмента перемещения (V) поместите шапку вверху. Мне нравится шапка с topbar, где есть контактная информация о компании.

Шаг 2.А. Делайте сразу правильный макет сайта

Теперь у вас есть два пути – изменять текст в изображении или писать сопутствующий текст в текстовом файле. Что удобнее? Все зависит от ваших целей. На личном опыте могу сказать, что лучше это сделать в макете, сразу подобрав шрифт и размеры. Так безопаснее и будет WYSIWYG в действии (What You See Is What You Get, «что видишь, то и получишь»).

Шаг 3. Идем к успеху

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

Что получилось

Спустя пару минут размышлений, нарезки и склеивания наиболее понравившихся кусков, у меня получился структурированный макет страницы «О нас»

О чем не стоит забывать

1. Называйте каждый слой с блоком адекватно, согласно тому, что там есть. Иначе потом совсем потеряетесь.
2. При подборе шрифта надо выбрать разный размер для заголовков и основного текста. При этом лучше руководствоваться библиотекой веб-шрифтов Google Fonts. Не забудьте отфильтровать кириллические шрифты.

Вам подойдет способ №2, если:

• у вас нет Photoshop (совесть не позволяет или нет места на диске) или вы еще не научились им пользоваться;
• вы хотите познакомиться с HTML кодом и CSS стилями без вмешательства в разметку;
• вам нужен интерактивный макет сайта.

Советую шикарный бесплатный инструмент для создания макетов Macaw. Для работы с программой ее надо скачать и установить – дело пары минут. В программе можно в визуальном режиме практически верстать макет, потому что вы сразу сможете опубликовать его и увидеть HTML-код и CSS. Немного подробнее о работе программы. У Macaw есть существенный недостаток – она создает неадаптивную веб-страницу. Как с этим бороться? Здесь уже понадобятся навыки верстальщика, чтобы подключить фреймворк (например, если делать макет сайта под Bootstrap). Однако если нужно просто показать работающий макет коллегам – Macaw отлично подойдет.

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

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

Вы можете самостоятельно задавать ширину столбцов, их количество и расстояние между ними. Если вы хотите, чтобы элементы «прилипали» друг к другу, задайте 100% ширину колонки и уберите между ними отступ. Зачем вам эта сетка? При HTML верстке макета сайта будет проще сделать адаптивный шаблон, т.к. современные фреймворки используют именно 12-столбиковую сетку.

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

Что дальше? Макетируем

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

Шаг 1.

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

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

Шаг 2

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

Шаг 3. Создание интерактивного макета сайта

Продолжаю перетаскивать блоки и вставлять в них текст. Кнопку создаю при помощи специального инструмента «Кнопка» (логика!). Macaw позволяет создавать интерактивный макет с разными состояниями кнопок и возможностью переключения между страницами.

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

Если нажать File -> Publish, вы получите готовую страничку, у которой можно будет просмотреть HTML-код и CSS в разных вкладках. Это очень удобно, если вы хотите увидеть, как выглядит разметка.

Что получилось

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

Особенности такого способа создания макета сайта:

• чтобы понять тонкости работы программы, надо потратить дополнительное время;
• даже когда уже вник в программу, все еще иногда не понятно, почему она ведет себя так, а не иначе;
• об адаптивности можно забыть, если не доделывать самому;
• действительно удобно создавать макет и даже немного разобраться в верстке – можно увидеть, как взаимодействуют элементы и вообще какая структура;
• в стилях могут появляться такие вещи «width: 16.6666666666%», которые надо будет исправлять; просто необходимо понимать, что здесь WYSIWG, а не больше.

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

Удобный инструмент для создания инфографики, которым я пользуюсь уже давно – сервис Creately. Здесь есть десятки и сотни компонентов для создания UI дизайна под разные устройства (больше под мобильные). Вам точно понравится, покажу некоторые из них.

Еще здесь удобно редактировать элементы, добавлять текст (и даже делать кнопки со ссылками!). В общем, всего за пару минут у меня уже получилось то же самое, что и в Macaw, только аккуратнее. Однако такой макет не сделать сильно интерактивным. К этому способу не будет шагов т.к. сервис хорошо интуитивно понятен. На скрине я постаралась максимально отобразить возможности сервиса.

Возможности сервиса Creately

В Creately мне нравится, что:

• можно выделить несколько объектов, распределить и выровнять их относительно друг друга;
• для того чтобы поделиться макетом с другом, можно экспортировать изображение в любом удобном формате;
• есть готовые элементы пользовательского интерфейса (например, браузер), что позволяет лучше понять проект.

На этом все. Это были те способы, к которым я пришла на том или ином этапе творческого развития. Если вы нашли пользу в этом материале – мы счастливы.

P.S. Данная статья является ознакомительной и не позволит вам стать веб-дизайнером. За серьезными знаниями придется еще много покопаться в интернетах.

Дизайн макета сайта в 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

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

 

По материалам: www.webdesguru.com

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

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

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

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

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

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

Создайте безобразный веб-дизайн

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

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

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

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

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

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

Учебное пособие по шаблону Softblue

1

1

1 9000 Учебник

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

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

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

Создайте творческую тему wordpress

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

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

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

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

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

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

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

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

Создание чистого макета PSD с трехмерным изображением

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

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

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

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

Руководство RocknRolla Blog Design

Это все на сегодня, друзья мои. Приходите завтра за другой статьей, связанной с дизайном. Или вы можете подписаться на меня в Твиттере или подписаться на мой RSS Кормить.

[Всего: 0 Среднее: 0/5]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте эту боковую панель для разработки раздела «Избранные проекты».Элементы могут включать небольшой снимок экрана и отрывок текста.

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

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

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

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

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

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

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

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

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

Следите за новостями в будущем руководстве, в котором мы рассмотрим кодирование визуального элемента в полную веб-страницу XHMTL / CSS.

Веб и дизайнеры | Полная платформа ресурсов для веб-дизайнеров и разработчиков — Создание макета веб-сайта в Photoshop — ПОРТФОЛИЯ

объявление

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

Введите адрес электронной почты и скачайте его сейчас!

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

Шаг 1. Добавьте сетку 960

Выравнивание необходимо для любого дизайна. Мы будем использовать систему 960s Grid, которую вы можете скачать здесь. После загрузки файла откройте 960_grid_12_col.psd, который находится в папке фотошопа.Обычно размер документа составляет 1080 X 1080 пикселей, но для нашего шаблона нам нужно 1200 X 1100 пикселей. Чтобы изменить размер шаблона, перейдите в меню «Изображение» -> «Размер холста», введите ширину 180 и высоту 80 и нажмите стрелку вверх. Это сделает шаблон 1200 X 1100 пикселей. Чтобы залить фоновый слой белым цветом, выберите фоновый слой, нажмите Shift + Backspace и залейте его белым цветом.

Шаг 2: Структура папки

Мне нравится сохранять структуру при проектировании чего-либо, и мне нравится, когда вы это делаете. Разделите этот дизайн на 3 части (верхний колонтитул, текст и нижний колонтитул).Чтобы реализовать это, создайте три папки с именами Header, Body и Footer в палитре слоев. Мы будем работать над каждым разделом шаг за шагом: сначала над заголовком, затем над телом и, наконец, над нижним колонтитулом.

Шаг 3. Добавьте градиентный фон в заголовок

Перед добавлением градиентного фона мы добавим направляющие линии. Нажмите View -> New Guide, выберите горизонтальный и введите 100 для позиции. Повторите тот же шаг, чтобы добавить направляющую линию 140 пикселей и 180 пикселей.

Чтобы добавить градиентный фон в раздел заголовка, создайте новый слой под названием Header bg.Используя инструмент выделения, создайте выделение размером 1200×140 пикселей, затем нажмите Shift + Backspace и залейте его любым цветом. Затем щелкните правой кнопкой мыши слой Header bg и выберите параметры наложения. Примените следующие настройки для наложения градиента в соответствии со следующим изображением.

Шаг 4. Добавьте две пиксельные линии

Около 80 пикселей сверху добавьте две линии в один пиксель. Создайте новый слой под названием Line 1px dark, выберите инструмент Marquee Tool и выберите 940 x 1 px, как показано на изображении ниже.

Залейте слой цветом # A54E0F, повторите то же самое для другой линии 1px, назовите его Line 1px dark и залейте его цветом # E37D1E.

Шаг 5: время очистки

Это хорошая привычка начинать систематизировать файл с самого начала. Если вы работали с одной и той же папкой (Header bg), весь слой, который мы создали до сих пор, должен находиться в ней. Даже если тебе не о чем волноваться. Заблокируйте свой фоновый слой.

Используя инструмент выделения, перетащите выделение за пределы документа так, чтобы были выбраны три слоя Header bg, Line 1px light и Line 1px dark. Теперь в палитре слоев перетащите выбранные слои в папку Background.С этого момента я не буду объяснять этот шаг для организации файла, а просто обратитесь к шагу 5.

Шаг 6. Вставьте свой логотип

Введите PORTFOLIA чуть выше 1px линий, щелкните правой кнопкой мыши слой portfolia и добавьте параметр смешивания со следующими настройками.

Теперь мы добавим затухающий свет за логотипом, чтобы создать новый слой с именем Fade, установить режим слоя на Overlay. Используя инструмент Rectangle Marquee Tool, выберите прямоугольник, чтобы закрыть логотип, затем выберите мягкую кисть 175 пикселей и установите цвет на #FFFFFF.Нажмите на слой несколько раз, чтобы придать ему эффект затухания. У вас должен быть световой эффект позади логотипа.

Шаг 7. Кнопка призыва к действию

Выберите инструмент Прямоугольник со скругленными углами и установите радиус 15 пикселей. Перетащите, чтобы создать круглый прямоугольник 225 х 30 пикселей, назовите его Оранжевый прямоугольник. Добавьте стиль слоя со следующими настройками.

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

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

Напишите номер телефона и сделайте внешний вид ярким в настройках стиля слоя.

Добавьте текст «Позвоните нам» и используйте следующую настройку.

Мы почти закончили с кнопкой призыва к действию 🙂, но нужно добавить последний бит. Добавьте две линии размером 1 пиксель между текстом «Позвоните нам» и номером телефона.

Создайте папку с названием «Кнопка призыва к действию» и выполните шаг 5.

Шаг 8: Добавьте навигацию

Выберите инструмент «Круглый прямоугольник» с радиусом 10 пикселей.Нарисуйте круглый прямоугольник размером 100 x 40 пикселей.

Добавить текст в меню навигации.

• Семейство шрифтов: Verdana
• Размер шрифта: 14pt
• Стиль шрифта: Обычный
• Цвет шрифта: #FFFFFF

Давайте добавим немного тени под меню, чтобы создать новый слой под названием Nav bottom shadow. С помощью инструмента «Прямоугольник» нарисуйте прямоугольник размером 1200x40px и добавьте тень со следующими настройками

.

Мы закончили с разделом заголовка, поэтому поместите все слои и папки в папку заголовка, кроме фонового слоя.

Шаг 9: слайдер изображения

Загрузите три изображения из SXC

Поместите загруженные изображения в документ. Измените размер изображения подсолнуха и кориандра до 300×200 пикселей и поместите его в середину документа. Измените размер двух других изображений до 240×158 пикселей и поместите их слева и справа от документа. После совмещения изображений размыте два небольших изображения. Перейдите в Filter-> Blur-> Motion Blur. Установите угол 180 и расстояние 6 пикселей.

Теперь очередь теней. Используя инструмент «Прямоугольник», создайте прямоугольник размером 300 x 120 пикселей и залейте его черным цветом # 000000.

Затем щелкните правой кнопкой мыши прямоугольник и выберите перспективу.

Перетащите якорь с одного из верхних концов, чтобы сделать его похожим на изображение ниже. Теперь перейдите в Filter-> Blur-> Motion Blur. Установите угол 180 и расстояние 6 пикселей. Затем перейдите в Фильтр-> Размытие-> Размытие по Гауссу, установите радиус 5,5 пикселей. Во время размытия изображения всплывающее окно попросит сначала растрировать форму, нажмите ОК.

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

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

Шаг 10: ползунок

Нарисуйте ползунок для ползунка с помощью инструмента «Прямоугольник со скругленными углами» с радиусом 20 пикселей. Снова используя инструмент Прямоугольник со скругленными углами с радиусом 8 пикселей, нарисуйте прямоугольник 70 х 26 пикселей. Примените к ползунку следующие настройки параметров наложения.

Пора добавить ручку ползунка к кнопке ползунка. Используя инструмент Rectangle Marquee Tool, нарисуйте область размером 1 x 13 пикселей и залейте ее белым цветом. Затем примените настройку наложения градиента к слою, назовите его 1px gradient line.Повторите слой 4 раза и переместите скопированный слой к смежным сторонам.

Шаг 11: Область содержимого

Добавьте две новые направляющие 480 и 520 пикселей. Затем загрузите значки из базового набора Pixel-Mixer и из базового набора Pixel-Mixer 2. Перетащите значок инструмента настройки из базового набора 2 из загруженного значка.

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

• Шрифт: Arial
• Размер шрифта: 18px
• Цвет: # E5932A
• Стиль шрифта: Курсив

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

• Шрифт: Arial
• Размер шрифта: 13px
• Цвет: # 79807C
• Стиль шрифта: Обычный

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

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

Шаг 12: Свидетельство

Добавьте две новые направляющие на 620 и 660 пикселей. Используя инструмент «Прямоугольник со скругленными углами», создайте прямоугольник с радиусом 10 пикселей (ширина: 940 пикселей и высота: 140 пикселей). Примените к слою следующие настройки.

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

Для типа знака цитаты »со следующими настройками

• Шрифт: Arial
• Размер шрифта: 80px
• Цвет: # 6E6C6C
• Стиль шрифта: Курсив

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

• Шрифт: Arial
• Размер шрифта: 13px
• Цвет: # 79807C
• Стиль шрифта: Курсив

Затем добавьте имя с такими же настройками, кроме стиля шрифта: Обычный, а для ссылки на веб-сайт используйте Цвет: # E5932A.

Шаг 13: нижний колонтитул

Нарисуйте прямоугольник с помощью инструмента «Прямоугольник со скругленными углами» с радиусом 8 пикселей, равным 920 x 170 пикселей и цветом # E37DLE. Примените к прямоугольнику следующие параметры обводки. Назовите этот слой «Рамка коробки».

Теперь в нижней части круглого прямоугольника создайте прямоугольник размером 940 x 60 пикселей (назовите этот слой «Передняя форма» и примените наложение градиента, как показано на изображении ниже.

Это должно выглядеть так.

После создания базовой основы для нижнего колонтитула добавьте тень под ней.Для этого нарисуйте прямоугольник 850 х 70 пикселей, назовите его Тень. Нажмите Edit -> Free Transform, затем щелкните правой кнопкой мыши прямоугольник и выберите Perspective. Перетащите верхнюю точку с одной стороны прямоугольника к другой точке, пока она не станет похожей на изображение ниже.

Перейдите в Filter -> Blur -> Motion Blur и примените следующие настройки.

Снова перейдите в Фильтр -> Размытие -> Размытие по Гауссу

Переместите слой Shadow под другой нижний колонтитул.

Чтобы добавить битовый 3D-эффект, добавьте новый слой «Прямоугольная форма слева» размером 26 x 60 пикселей, закрасьте его цветом # B16117.Нажмите Edit -> Free Transform, затем щелкните правой кнопкой мыши прямоугольник и выберите Skew. Удерживая клавишу Alt, перетащите верхнюю правую точку вверх.

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

Для прокрутки эскизов начните с добавления нового скругленного прямоугольника (назовите его Image shape) размером 175x100px, залейте его цветом #FFFFFF и примените обводку 1px # 985414. Загрузите изображение MAM Chihuly Show 5 с SXC и поместите его над слоем Image shape.Выберите слой изображения, затем перейдите в Слой -> Создать обтравочную маску, это замаскирует изображение со слоем прямоугольника под ним. При необходимости отрегулируйте изображение. Чтобы показать эффект приподнятости на миниатюре, добавьте слой Тень и с помощью инструмента Эллипс создайте небольшой эллипс и перейдите в Фильтр -> Размытие по Гауссу с Raidus 1.3px, теперь у вас должно быть уменьшенное изображение с тенью, как на изображении ниже.

Повторите те же шаги, чтобы создать еще два эскиза.

Последний шаг 🙂 этого урока — добавление стрелок к миниатюрам.Создайте круг (назовите его Стрелка влево) размером 19 x 19 пикселей, примените следующие настройки к слою.

Над слоем с кругом добавьте новый слой и назовите его «Стрелка влево». Добавьте маленькую стрелку и примените настройку обводки, как показано ниже.

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

Заключение

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

Как создать чистый макет веб-сайта в 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-шаблон для бизнеса здесь. А здесь вы найдете множество замечательных бесплатных веб-шаблонов. Не забывайте нажимать кнопки «Поделиться», потому что делиться — это сексуально;)

Создайте плоский макет веб-сайта в Photoshop

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

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

ресурсов, которые вам понадобятся:

Плоский набор иконок

Шаг 1 Новый холст

Откройте программу Photoshop и создайте новый файл, выбрав «Файл»> «Создать» или просто нажав Ctrl + N. Когда откроется диалоговое меню, вы захотите задать новому холсту размеры 1360 x 1979 пикселей.Нажмите ОК.

Цвет фона шага 2

Создайте новый слой; это будет то место, где вы хотите разместить основной цвет фона. В этом случае я буду использовать цвет # d5bfc4. Используйте инструмент «Заливка», чтобы заполнить слой.

Указания по шагу 3

Теперь, когда у вас есть цвета фона, вам нужно добавить направляющие. Эти рекомендации помогут вам разделить холст так, чтобы у каждого раздела страницы была своя выделенная область. Чтобы добавить рекомендации, вам нужно перейти в View> New Guide.Затем появится окно, в котором вы можете ввести свои измерения. Ниже показано изображение, показывающее, как ввести первые размеры 751 пикселей.

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

Шаг 4 Цвета раздела

В вашем первом разделе размером 751px вы хотите заполнить это пространство цветом # e62452 вот так.

Оставьте пространство размером 1163 пикселей, но заполните область под ним цветом #ffffff.

Шаг 5 Текст раздела

Теперь мы собираемся начать добавлять контент в нашу первую цветовую секцию. Используя шрифт Arial и размер шрифта 60pt, введите желаемый текст в #ffffff и сместите его влево от раздела.

Затем введите 30pt под строкой вашего тега или любой другой информации, которую вы предпочитаете.

Кнопка шага 6

Необходимо добавить кнопку под только что созданным текстом, но мы хотим сохранить плоский вид.Для этого используйте инструмент Rectangle Tool, чтобы создать небольшой прямоугольник под второстепенным текстом, убедившись, что ваш цвет переднего плана установлен на # fc2f60.

Дважды щелкните слой с кнопкой и откройте диалоговое меню «Параметры наложения». Установите флажок Обводка и установите размер обводки на 3 пикселя и цвет на #ffffff. По завершении нажмите ОК.

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

Завершите, добавив к кнопке текст «ЗАПУСК» размером 46 пунктов.

Step 7 Планшет

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

Заполните внутреннюю часть планшета цветом # d99f9b, чтобы представить экран.

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

Шаг 8 Логотип

Когда наш основной раздел почти завершен, теперь мы можем пойти и добавить наш логотип, чтобы завершить раздел. Сначала убедитесь, что ваш цвет переднего плана установлен на #ffffff. Теперь вверху экрана укажите, что вы хотите, чтобы у вашей фигуры было 8 сторон. Щелкните стрелку инструмента Custom Shape Tool и заполните следующие разделы.

Теперь создайте форму прямо над текстом. Форма должна выглядеть так.

Затем растеризуйте свой слой, щелкнув по нему правой кнопкой мыши и выбрав «Растеризовать слой». Когда вы это сделаете, вы можете использовать инструмент Circular Marquee Tool, чтобы вырезать кусок из середины формы вашего логотипа.

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

Шаг 9 Сервисный ящик

Теперь мы пойдем и начнем конкретизировать нашу «служебную» коробку. Сначала начните с добавления заголовка УСЛУГИ вверху шрифтом 46pt и цветом #ffffff.

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

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

Откройте свой Flat Icon Set еще раз и выберите шестеренку, защитный экран, речевой пузырь и облако загрузки. Измените размер каждого значка и поместите по одному в каждый круг.

Завершите служебную коробку, добавив свой текст.

Шаг 10 Ящик с отзывами

Начните с добавления желаемого текста заголовка в поле для отзывов.

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

Теперь, используя цвет # d5bfc4, вы должны создать восемь маленьких кружков и равномерно расположить их под своей характеристической цитатой.

Перейдите к третьему кругу отзывов и откройте меню «Параметры наложения». Установите флажок «Обводка» и измените размер обводки на 3 пикселя и цвет обводки на # e62452. Нажмите ОК, а затем измените режим слоя на Светлее.

Шаг 11 Информационный бюллетень

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

Теперь мелким шрифтом (30 пунктов) введите дополнительный текст под заголовком.

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

Как и раньше, добавьте контур #ffffff на 3 пикселя вокруг ваших блоков, затем измените режим слоя на Затемнение.

Добавьте значок конверта в квадрат, а затем введите «ваш адрес электронной почты» в большее поле.

Вот как будет выглядеть ваше окончательное изображение.

Скачать PSD файл

Учебник по дизайну веб-сайтов в Photoshop (часть 3): создание профессионального макета веб-сайта

Красивый, чистый и практичный дизайн интерфейса — неотъемлемая часть веб-дизайнеров. В этом уроке мы создадим чистый и профессиональный веб-макет в Photoshop.

1. 10 распространенных проблем в Photoshop и основные способы их устранения

Документ

1. Набор значков функций — wefunction.com
2. Значок Twitter — iconeden.com
3. Шрифты Bebas — dafont.com

Шаг 1: Используйте Mockup

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

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

Шаг 2. Настройка Canvas

Здесь у нас есть план для веб-макета, так что давайте вместе переделаем его. Создайте новый документ размером 1200 x 1500 пикселей.

Здесь нам нужен макет 960 пикселей, поэтому нам нужно определить рабочую область, добавив путь.Нажмите Ctrl + A , чтобы выделить весь документ.

Перейдите к Select> Transform Selection , уменьшите выделение до 960 пикселей в ширину. Это рабочая область макета.

Добавить направляющую к выбору.

Создайте некоторое расстояние между границами и содержимым, чтобы добавить его позже. Выделив область, снова выберите Transform Selection , измените размер выделения до ширины 920 пикселей.Это означает, что с каждой стороны по 20 пикселей, всего 40 пикселей.

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

Шаг 3. Создайте заголовок

Создайте заголовок для макета, выберите высоту 465 пикселей.

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

Добавьте градиент к заголовку. Дважды щелкните миниатюру слоя и выберите Gradient Overlay . Создайте 2 цвета градиента, используя настройки, показанные ниже.

Получаем следующий результат:

Далее нужно добавить подсветку для заголовка. Создайте новый слой, нажав Ctrl + Alt + Shift + N. Выберите кисть Soft диаметром , 600 пикселей, и цветом # 19535a и щелкните один раз в середине заголовка, чтобы создать блики.

Выберите верхнюю часть высотой 110 пикселей.

Нажмите Удалить , чтобы удалить выбранную деталь.

Сузьте его по вертикали, нажав Ctrl + T.

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

Создайте новый слой, нарисуйте линию выделения в 1 пиксель, используя инструмент Pencil Tool , цвет # 01bfd2 .

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

Примените градиент выше.

Шаг 4. Создание образцов текстуры

Теперь создайте простой тестовый шаблон и примените его к заголовку. Выберите инструмент Pencil Tool , используйте кисть размером 2 пикселя и добавьте две квадратные точки, чтобы коснуться каждого угла. Выключите фон и выберите точки, затем выберите Edit> Define Pattern .

Создайте новый слой и поместите его под выделенным слоем выше. Выберите область, к которой вы хотите применить шаблон, нажмите Shift + F5, чтобы загрузить диалоговое окно «Заливка».Выберите только что созданный шаблон и нажмите ОК.

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

Смешайте образец гармонично с названием. Добавьте слой-маску Layer Mask к этому шаблонному слою. Выберите большую кисть soft , цвет #ffffff. Уменьшите Непрозрачность примерно до 60% и закрасьте. Если он вам покажется слишком сильным, вы можете отрегулировать непрозрачность этого слоя.

Имеем следующий результат:

Шаг 5: Добавить ogo

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

Введите текст, используя шрифт, который вам нравится, в этом примере используйте шрифт «Bebas».

Примените к логотипу легкие эффекты.

Шаг 6. Добавьте панель навигации

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

Создать кнопку навигации.Используя инструмент Rectangular Marquee Tool , залейте его любым цветом и дайте Opacity Fill равным 0.

Дважды щелкните миниатюру слоя, выберите Gradient Overlay и примените этот параметр.

Шаг 7. Ползунок содержимого

Выберите область 580 x 295 пикселей.

Покройте это выделение серыми тонами.

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

Теперь добавим к ползунку эффект тени. Создайте новый слой, выберите Brush Tool , установите диаметр до 400 пикселей. Откройте панель Brushes , уменьшите уровень Roundness с настройками ниже.

Используйте цветную кисть # 000000 и добавьте черную полосу.

Примените Gaussian Blur , чтобы смягчить края.

Выделите нижнюю часть тени и удалите ее.

Переместите шар прямо на ползунок.

Затем сузьте вертикально и отцентрируйте ползунок. Выберите оба слоя и на панели Options нажмите кнопку Align Horizontal Centers .

Скопируйте этот слой с тенью и поверните его по вертикали, поместив на нижний край ползунка.

Создайте кнопку управления ползунком с помощью инструмента Marquee Rectangular и закройте его цветом # 000000 .

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

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

Создайте рамку с цветом # 000000.

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

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

Шаг 8: Добавьте несколько строк, чтобы помочь

Приветственное сообщение и некоторое описание сайта.

Шаг 9: Заполните заголовок

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

Оставьте расстояние 1px между головой и тенью.

Шаг 10: Используйте градиент для фона

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

Создайте новый слой под заголовком и примените к нему цвет градиента.

Шаг 11: Добавьте ползунок x

Создание вращающегося слайдера

Примените Inner Shadow к точке, чтобы увидеть активный элемент на ползунке.

Шаг 12: Создайте раздел содержимого строк

Выберите инструмент Pencil Tool и нарисуйте линию в 1 пиксель светло-серого цвета (#aaaaaa).

Скройте гладкие края, используя маски градиента.

Шаг 13: Добавьте основное содержание

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

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

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

Создайте простую кнопку « Подробнее », выбрав инструмент Rectangle Tool , чтобы нарисовать форму.

Примените наложение градиента и обводку для этой кнопки.

Скопируйте эту кнопку в другие разделы.

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

Перетащите изображение в поля.

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

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

Создайте ленту Twitter.Перетащите значок птицы в Twitter.

Добавить уведомление Twitter.

Создайте кнопку для дополнительных твитов.

Примените стили, как на изображении ниже.

Добавить текстовое содержимое.

Шаг 14: Создайте нижний колонтитул и завершите

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

Нанесите Color Overlay , как показано ниже.

Наконец, добавьте пешеходную навигацию и информацию об авторских правах.

Конечный результат

Скачать: PSD файл

Подробнее:

1. Как создать веб-сайт в Photoshop (часть 1): создать тему для магазина рукоделия
2. Как создать веб-сайт в Photoshop (часть 2): создание целевой страницы для веб-сайтов о путешествиях

Желаю всем успехов!

Dreamweaver tutorial 09 — Использование Photoshop для веб-дизайна

Учебник по Dreamweaver 09: Как использовать Photoshop CC с Dreamweaver CC

Привет, добро пожаловать! Меня зовут Дэниел Вальтер Скотт.Я инструктор в компании «Принеси свой собственный ноутбук». Этот курс предназначен для людей, которые плохо знакомы с Dreamweaver и веб-дизайном. Тема, которую мы рассматриваем сегодня: Photoshop для веб-дизайна
Dreamweaver не создает изображения. Это скорее строительный инструмент. Вы собираете вместе все элементы, например, вы могли набрать свой контент в Word, вы могли создать свои изображения в Photoshop или FireFox и собрать их в Dreamweaver. Мы будем смотреть в Photoshop.

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

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

Использование инструмента среза в Photoshop CC

У нас есть «логотип», «кнопка» и «изображение». Этот текст будет создан в Dreamweaver, поэтому мне не нужно его сохранять. Но мне нужно сохранить эту графику здесь. Чтобы сохранить их, мы воспользуемся инструментом «Срез», чтобы сохранить их. Затем нам нужно решить, будут ли они в формате GIFF, PNG или JPEG.Вот мой «Инструмент нарезки», он скрывается под моим «Инструментом кадрирования». Удерживая инструмент «Обрезка», нажмите «Нарезать». Это позволит мне рисовать прямоугольники вокруг небольшой графики. Итак, я нарисовал эти прямоугольники, затем перешел в файл и сохранил для Интернета. Это разделит эти изображения в отдельные файлы. Здесь я могу решить, какое из этих изображений лучше всего подходит для какого формата.

Нарезка кнопки в Photoshop

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

Насколько большим должно быть изображение в сети?

Когда я дойду до этой кнопки, я понимаю, что GIFF не будет работать, потому что недостаточно цветов. С точки зрения качества это выглядит не лучшим образом.Размер файла 60 килобайт, очень большой. Большое изображение имеет размер 100 килобайт, а маленькое изображение — 10 или меньше. Для этого типа изображения вы хотите нацелиться от 10 до 30. GIFF работать не будет.
Если я перейду в JPEG, он уменьшится до 29 килобайт. Я могу использовать формат Lossey, чтобы поиграть с качеством, так что я могу подняться до 100 или до 0. Когда качество падает до 0, это выглядит ужасно. Я выбираю не выше 80 и не ниже 40. Это зависит от вашего имиджа и от того, для чего вы его используете.
В этой ситуации изображение представляет собой просто красивую графику, поэтому я могу снизить качество, не влияя на мой веб-сайт.Могу перейти на 0, выглядит ужасно. В 40 это выглядит нормально, но при увеличении выглядит зернистым. В этом случае 60 выглядит как изображение хорошего качества, а размер файла — 22. При значении 80 размер изображения увеличивается вдвое.

Как сделать прозрачное изображение в Фотошопе (PNG)

У этого изображения вверху должен быть прозрачный фон. Зайдите в «файл» — «сохранить для Интернета». Если у меня это как GIFF, там немного прозрачности, но она плохая. Если мы перейдем к PNG 32, разница будет огромной.С прозрачностью он позволит получить полностью прозрачный фон.

Нажмите «сохранить». Он попросит меня назвать мои файлы. Я собираюсь назвать свой hforhome и сохранить его на свой рабочий стол. У меня есть варианты. Там, где написано все срезы, где раньше я вытащил 3 отдельных среза. Фотошоп вытаскивает все срезы. Мне просто нужны мои «пользовательские фрагменты», только 3, которые я сделал. Нажмите «сохранить», перейдите на рабочий стол, в «папке изображений» у меня есть 3 файла: «PNG», «GIFF» и «JPEG».