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

Создаем в фотошопе профессиональный psd-макет для веб-сайта

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

И так перейдем к самому уроку:

Создаем в фотошопе профессиональный psd-макет для веб-сайта


Материалы для урока:


Шаг 1: Макет

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

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

img(1a)


Шаг 2: Настройка Холста

Давайте создадим  дизайн вместе, шаг за шагом! Итак, ширина макета пусть будет в 960 пикселей. Создайте новый документ размером 1200 х 1500 пикселей.

img(1)

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

img(2)

Перейдите в меню Выделение > Трансформировать выделенную область (Select > Transform Selection). Измените ширину выделения до 960 пикселей. Расположите выделение по центру холста.

img(3)

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

img(4)

Теперь нам нужно создать небольшие отступы между границей и содержанием макета, которое мы добавим позже! Снова перейдите в меню Выделение > Трансформировать выделенную область (Select > Transform Selection) и измените размер выделения до 920 пикселей в ширину. Тем самым отступ с каждой из сторон составит по 20 пикселей.

img(5)


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

img(6)


Шаг 3: Создание шапки макета (хедера)

Давайте создадим шапку для нашего макета! Сделаем выделение высотой в 465 пикселей

img(8)

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

img(9)

Теперь добавим градиент для нашей шапки. Дважды щелкните на пиктограмме слоя. Выберите Наложение Градиента (Gradient Overlay). Создайте градиент, используя настройки, показанные на изображении ниже. Примените настройки.

img(10)

Градиент должен выглядеть следующим образом.

img(11)

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

img(12)

Создайте сверху  выделенную область высотой в 110 пикселей.

img(13)

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

img(14)

Сожмите светлое пятно по вертикали, нажав комбинацию клавиш Ctrl + T.

img(15)

Теперь нам нужно убедиться в том, что светлое пятно идеально центрировано в шапке макета. Выделите слой с пятном и нажмите клавишу "V" для переключения на инструмент Перемещение (Move Tool). На панели управления выбранным инструментом (Options) нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).


img(16)

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

img(17)

Теперь скроем края линии с помощью маски градиента. Выберите инструмент Градиент (Gradient Tool), на панели управления выбранным инструментом (Options) выберите Редактор градиентов и создайте градиент как показано на изображении ниже.

img(18)

Примените созданный градиент.

img(19)

Шаг 4: Создание текстурного шаблона

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

img(20)

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

img(21)

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

img(23)

Смешивание текстуры плавно переходит в шапке. Добавьте маску слоя к слою с текстурой. Возьмите кисть с большой мягкостью. Выберите белый (#FFFFFF) цвет для кисти. Уменьшите Непрозрачность (Opacity) кисти до 60% и рисуйте. Если вы слишком сильно нанесёте краску, то потом можно будет настроить прозрачность слоя отдельно.

img(24)

Прекрасно получилось.

img(25)


Шаг 5: Добавление логотипа

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

img(27)

Добавим текст логотипа. Я использовал шрифт "Bebas Font". Скачать его можно абсолютно бесплатно.

img(28)

Добавим некоторые эффекты к логотипу. Смотрите изображения ниже.

img(29)

img(30)


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

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

img(31)

img(32)

Создайте навигационные кнопки. Используйте инструмент Прямоугольник (Rectangular Marquee Tool). Заполните любым цветом. Далее сделаем нижнюю часть прямоугольника полностью прозрачной.

img(33)

Дважды щелкните на пиктограмме слоя, выберите Наложение градиента (Gradient Overlay). Используйте настройки, показанные на изображении ниже.

img(34)

Шаг 7: Контент-слайдер

Создайте выделение размером в 580 х 295 пикселей.

img(35)

Залейте выделенную область серым цветом.

img(36)

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

img(37)

Теперь добавим эффект тени под слайдер. Создайте новый слой. Выберите инструмент Кисть (Brush Tool), установите диаметр до 400 пикселей. Откройте Палитру кистей (Brushes palette), и в ней используйте следующие настройки.

img(38)

Установите цвет кисти #000000 и нарисуйте ей в нужном месте .

img(39)

Примените фильтр Размытие по Гауссу (Gaussian Blur), чтобы смягчить края.

img(40)

Выделите нижнюю половину тени и удалите её.

img(41)

Поместите тень чуть выше слайдера по середине.

img(42)

Уменьшите её по вертикали. Далее необходимо центрировать тень со слайдером. Выберите оба слоя и на панели управления выбранным инструментом (Options) нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

img(43)

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

img(44)

Далее создадим кнопки управления для слайдера с помощью инструмента Прямоугольник (Rectangular Marqee). Залейте их чёрным цветом  (#000000).

img(45)

Установите Непрозрачность (Opacity) кнопки в 50%.

img(46)

Выберите инструмент Произвольная фигура (Auto shapes) и на панели управления выбранным инструментом (Options) выберите стрелку. Добавьте её в кнопки.

img(47)

Добавляем полоску в нижней части слайдера. Заливаем её чёрным цветом (#000000).

img(48)

Делаем Непрозрачность (Opacity) полоски в 50%.

img(49)

Здесь мы можем добавить описание картинки.

img(50)

Шаг 8: Добавление  описания

Теперь добавим приветствие и краткое описание сайта.

img(51)

img(52)


Шаг 9: Заканчиваем с шапкой

Мы почти закончили шапку. Давайте добавим тонкий эффект тени чтобы завершить шапку! Создайте тень так же, как мы создавали её ранее для слайдера, используя инструмент Кисть (Brush Tool).

img(53)

Оставьте  разрыв в 1 пиксель между шапкой и тенью.

img(54)

Шаг 10: Создание градиента для фона

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

img(55)

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

img(56)

img(57)


Шаг 11: Добавление элементов управления вращением слайдера

Создайте элементы слайдера.

img(58)

Чтобы указать текущий активный элемент управления в слайдере примените к нему Внутреннюю тень (Inner Shadow).

img(59)

Шаг 12: Создание разделителя

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

img(60)

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

img(61)


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

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

img(62)

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

img(63)

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

img(65)

img(66)

Теперь создадим простую кнопку "Подробнее". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Нарисуйте кнопку на новом слое.

img(67)

Нанесите на кнопку градиент и сделайте обводку.

img(68)

img(69)

Дублируйте кнопку.

img(71)

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

img(72)

Добавьте клипы изображений в прямоугольники.

img(73)

img(74)

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

img(75)

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

img(76)

Давайте создадим иконку для твиттера. Найдите значок синей птички.

img(77)

Добавьте анонс для твиттера.

img(78)

Создадим кнопку для прочтения полного твитта.

.

img(79)

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

img(80)

img(81)

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

img(82)


Шаг 14: Создание подвала и заключительные штрихи

Выделите область для футера и залейте её серым цветом.

img(83)

Перейдите в Наложение цвета  (Color Overlay) и измените цвет.

img(84)

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

img(85)


Preview of Final Results

website template

Header image provided by DepositPhoto

Автор урока: Nikola Lazarevic

Переводчик урока: Ирина Шипилова

Ссылка на источник



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


  • Источник: http://photoshop-help.ru
  • 23.11.2011
  •   Просмотров: 73733
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Роман (04.05.2012 | 02:24)

Объясните то, пжста, каким макаром в поле ширины в процентах указаны пиксели??

Владислав (19.04.2013 | 06:28)

Роман, нужно вручную поставить "пикс" и все.

Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки