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


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

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

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

  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

Создание веб-шаблона с помощью Photoshop

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

Обратите внимание :
1. У вас должен быть Photoshop CS3 или более поздняя версия Photoshop установлен на вашем компьютере.
2. Чтобы выполнить указанные шаги, вам понадобятся изображения, использованные в этом руководстве. Вы можете скачать images.zip (нажмите на ссылку, чтобы скачать) или перейдите по ссылкам рядом с изображениями в шагах.

  1. Открыть Photoshop (какая бы версия у вас ни была, мы используем Photoshop CS3) и выберите Файл> Новый в главном меню; Откроется окно Новый . Задайте параметры в этом окне, как показано на рисунке. Нажмите кнопку ОК; открывается новый файл фотошопа.

  2. Создайте новый слой, переименуйте его в фоновый и откройте фон .jpg (нажмите чтобы загрузить это изображение) в файле фотошопа. В фон отображается, как показано на рисунке.

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

  4. Выбрать Gradient Tool или нажмите G, чтобы активировать этот инструмент.Установите шестнадцатеричные значения для цветового узла правого градиента на # 000000 и левый цветовой нод градиента на # 850900. Добавьте радиальный градиент к выбор.
  5. Далее, добавьте любое HD-изображение браслета в рамку градиента. Выберите два слоя ( слой градиента и слой браслета) и нажмите CTRL + e, чтобы объединить их вместе, как показано на рисунке. (Щелкните по этой ссылке, чтобы загрузить это изображение).

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

  6. Дважды щелкните на слое колец; Стиль слоя отображается окно. Задайте следующие настройки для параметра Outer Glow в этом окне, как показано на рисунке.
  7. Аналогично добавить браслетов.jpg , ravishing _rings.jpg и earings.jpg в фотошоп файл. Также добавьте Outer Glow к этим изображениям, как обсуждалось на предыдущем шаге. Выровняйте все четыре изображения, как показано на рисунке.
  8. Использование текстовый инструмент для ввода меток к изображениям как КОЛЬЦА ДЛЯ РАСШИРЕНИЯ , РЕЗКА СЕРЬГИ EDGE , БРАСЛЕТЫ С МАНЖЕТАМИ , FASHION PULSE BRACELETS ( шрифт : Aparajita, Тип : Обычный, Размер : 18pt, Цвет : Белый) соответственно слева направо.Добавьте к этому тексту внешнее свечение как обсуждалось ранее в руководстве.
  9. Также введите название компании ENTHEOS Jewels ( шрифт : Rage Italic, Type : Regular, Size : 72pt, Color : Белый). Нанесите тень на слой Entheos ; слой Откроется окно стиля . Выберите в этом окне опцию Drop-Shadow и нажмите кнопку Ok .
  10. Также напишите текст, КОЛЛЕКЦИЯ ЛУЧШИХ СОХРАНИТЬ СЕКРЕТЫ НА ЗЕМЛЕ ( Шрифт : Trajan Pro, Тип : Обычный, Размер : 14pt, Цвет : Белый). Выровняйте все эти тексты, как показано на рисунке.
  11. Введите текст КОЛЛЕКЦИИ , ЧАСОВ , АРОМАТОВ , МАГАЗИНЫ , СОБЫТИЯ , ЗАГРУЗИТЬ , СВЯЗАТЬСЯ С НАМИ ( Шрифт : Orator Std, Type : Medium, Size : 18pt, Color : White) слева направо.Убедитесь, что все тексты на разных слоях.
  12. Введите текст FULLSCREEN и MUSIC ( шрифт : Orator Std, Type : Medium, Size : 12pt, , цвет : белый). Эти два текста тоже должны быть отдельными слоями. Выровняйте тексты, добавленные на шагах 9 и 10, как показано на рисунке.

  13. Создайте новый слой и переименуйте его в Hanging_pendant и откройте Hanging_pendant.jpg (нажмите, чтобы загрузить это изображение) в файле фотошопа. Вы можете добавить к нему тень, но избегайте добавления, если хотите импортировать его в вспышка. Выровняйте этот кулон, как показано на рисунке.

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

Нажмите здесь, чтобы загрузить файл фотошопа

Перейти к шагу 2 >> Импорт файла Photoshop во Flash CS5


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


.

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

Этот урок научит вас создавать макет веб-сайта, показанный ниже, в Photoshop. Щелкните здесь, чтобы просмотреть готовый макет. Вы также узнаете, как преобразовать это в оптимизированный html-сайт, в следующих нескольких руководствах.

Это руководство является частью 4-страничного учебного пособия о том, как создать простой веб-сайт с помощью Photoshop и Dreamweaver.

Урок 1: Создание уникального заголовка веб-сайта
Урок 2: Создание макета веб-сайта в Photoshop
Урок 3: Нарезка макета в Photoshop
Урок 4: Создание веб-сайта в Dreamweaver

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

Помните, что при разработке макета вам необходимо определить пространства для следующих элементов:

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

.

Начните с шаблона в Photoshop: как найти и использовать шаблоны в Photoshop

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

Не начинайте с нуля, используйте шаблоны Adobe Photoshop, чтобы быстро создать дизайн и специальные эффекты.Вы можете получить шаблоны прямо в Photoshop. Из этого туториала Вы узнаете, как получить множество профессионально разработанных шаблонов и как именно их использовать.
►Станьте автором Adobe Stock: https://adobe.ly/2qdDFRH
►10 бесплатных изображений из Adobe Stock https://adobe.ly/2pnpTe4

Спасибо, что посмотрели!

Колин


.

Как создавать шаблоны коллажей в Photoshop

Описание учебника

Узнайте, как создавать шаблоны коллажей в Photoshop в этом выпуске! Это бесценный метод для тех, у кого есть блог, веб-сайт или кто-то просто хотел объединить несколько изображений в одно.

Начало работы

Раздел 1: Подготовка изображений

Начните с пустого документа и загрузите изображения в Photoshop. Мы выбираем пойти в Файл - Скрипты - Загрузить файлы в стек.Это втягивает сразу все фотографии. Затем сгруппируйте изображения вместе (Ctrl / Cmd + G).

Раздел 2: Использование групп и масок слоев

Вытяните первое изображение, с которым вы хотите работать, из только что созданной группы. Затем - это будет звучать странно - сгруппируйте его с самим собой (щелкните слой и нажмите Ctrl / Cmd + G). Затем поместите маску слоя на эту группу.

Только этот процесс позволяет нам создавать разделы по отдельности, и позже вы увидите, насколько это удобно!

Затем залейте эту группу Layer Mask черным цветом (сделав изображение невидимым).Выберите инструмент Marquee Tool и создайте прямоугольную секцию в любом месте. Теперь выберите маску слоя и залейте ее белым цветом (Shift + Delete). Вы увидите, что изображение отображается только там, где было выделено выделение. Вы можете масштабировать изображение, как хотите, и оно останется внутри выделенного фрагмента! Woohoo.

Раздел 3: Определение точных сечений

Если вы хотите, чтобы изображение было разделено пополам, вы можете создать новый слой Color Fill и удерживать Ctrl / Cmd + T.Затем переместите центральную точку в сторону и измените ширину или высоту на 50%. Это разделит этот цветной слой пополам! Это быстрый и простой способ получить точные измерения.

Если вы хотите, чтобы изображение было видно только на этом слое Color Fill, сгруппируйте его вместе с собой, как мы делали раньше. Затем нажмите Ctrl / Cmd + щелкните этот цветной слой. Это создаст маску слоя там, где она вам нужна.

Раздел 4: Игра с формами сечения

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

Удачи! Объединение нескольких фотографий в одно изображение может иметь действительно прекрасный эффект!

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий