prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Уроки » Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Как создать профессиональный макет сайта в Photoshop.


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

Авторские права:
Урока с сайта http://photoshoptutorials.ws
Автор: NiranthM
Перевод на русский язык: Екатерина Москвина

Что нам потребуется:
1.Шрифт Bebas
2.Иконки социальных сетей -ВКонтакте,Facebook,GMail и т.д
3.Функциональные кнопочки
Скачать все нужные файлы
Кому не достаточно деталей макета могут посетить сайт PSDMania -там все есть!
Пожалуй можно начать.
Шаг 1: Макет
Прежде чем приступить к дизайну мы должны спланировать технические требования, внешний вид и функциональность, а затем воплотить идеи в макете. Макеты и каркасы позволят нам создать гибкий дизайн, так как это передовые практики в вебстроительстве.
Ниже я набросал макет, используя только серые тона. Так мы исключили цвет из общей картины, чтобы не отвлекаться на него и сконцентрироваться на расположении блоков и элементов. Макет может быть детализирован на столько, на сколько вы хотите, просто кратко определите расположение элементов.
Как создать профессиональный макет сайта в Photoshop


Шаг 2: Настройка холста
Итак, у нас есть чертеж нашего макета. Давайте вместе создадим дизайн! Мы собираемся создать макет шириной 960px. Создайте новый документ 1200 x 1500.
Как создать профессиональный макет сайта в Photoshop

Ширина макета 960px, поэтому нам необходимо определить рабочую область. Нажмите Ctrl+A, чтобы выделить весь документ.
Как создать профессиональный макет сайта в Photoshop

Перейдите Select>Transform Selection. Сократите выделенную область до 960px. Это рабочая область макета.
Как создать профессиональный макет сайта в Photoshop

Добавьте направляющие линии к выделению.
Как создать профессиональный макет сайта в Photoshop

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

Добавьте направляющие линии к выделению.
Как создать профессиональный макет сайта в Photoshop

Шаг 3: Создание шапки
Давайте создадим шапку макета! Создайте выделение 465px в высоту.
Как создать профессиональный макет сайта в Photoshop

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

Добавьте градиент в шапку. Двойной щелчок мыши по слою. Выделите Gradient Overlay. Создайте двухцветный градиент. Используйте настройки.
Как создать профессиональный макет сайта в Photoshop

Должно выглядеть так.
Как создать профессиональный макет сайта в Photoshop

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

Создайте вверху выделение высотой 110px.
Как создать профессиональный макет сайта в Photoshop

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

Сократите её по вертикали, нажав Ctrl+T.
Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop

Мы должны убедиться, что блик находиться строго по центру. Выделите слой шапки и блика и нажмите "V", чтобы переключиться на инструмент MoveTool. На панели настроек нажмите кнопку Align Horizontal Centers.
Как создать профессиональный макет сайта в Photoshop

Создайте новый слой, нарисуйте линию шириной 1px, используя PencilTool с цветом #01bfd2. (Е.М.: Чтобы линия была ровной, зажмите Shift в момент рисования).
Как создать профессиональный макет сайта в Photoshop

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

Примените градиент.
Как создать профессиональный макет сайта в Photoshop

Шаг 4: Создание шаблона текстуры
Сейчас создадим простой шаблон и применим его к шапке. Выберите PencilTool, установите размер кисти 2px и создайте две точки, которые касаются друг друга углами. Отключите фон и выделите точки. Выберите Edit > Define Pattern.
Как создать профессиональный макет сайта в Photoshop

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

Как создать профессиональный макет сайта в Photoshop

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

Текстура должна плавно переходить в градиент. Создайте маску слоя на слое с текстурой. Выберите мягкую кисть и рисуйте кистью большого диаметра. Цвет кисти: #ffffff. (Е.М.: Предварительно очистите маску слоя, если у неё есть заливка). Уменьшите Opacity кисти до 60% и рисуйте. Если получилось слишком сильно, настройте прозрачность слоя индивидуально.
Как создать профессиональный макет сайта в Photoshop

Красиво сочетается.
Как создать профессиональный макет сайта в Photoshop

Шаг 5: Добавление логотипа
Фон завершен. Теперь добавим логотип. Перед добавление логотипа вставим блик позади него. Выберите мягкую кисть с цветом #19535a. Добавьте блик.
Как создать профессиональный макет сайта в Photoshop

Добавьте логотип. Шрифт я использовал "Bebas". Скачал его бесплатно.
Как создать профессиональный макет сайта в Photoshop

Добавим легкие эффекты на логотип.
Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop

Шаг 6: Навигация
Добавим ссылки меню.(Е.М.: Цвет текста: #1eafb5)
Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop

Создадим кнопку меню. Используем Rectangular Marquee Tool. Зальем любым цветом. Затем установим Fill Opacity 0%.
Как создать профессиональный макет сайта в Photoshop

Двойной щелчок по слою, выберем Gradient Overlay. Используйте указанные настройки. (Е.М.: Цвет текста выделенного пункта меню: #00ffff)
Как создать профессиональный макет сайта в Photoshop

Шаг 7: Слайдер
Создайтe выделение 580 x 295 px.
Как создать профессиональный макет сайта в Photoshop

Залейте выделение серым цветом.
Как создать профессиональный макет сайта в Photoshop

Вставьте изображение, которое вы хотите использовать. Обрежьте его до нужного размера.
Как создать профессиональный макет сайта в Photoshop

Теперь добавьте эффект тени слайдеру. Создайте новый слой. Выберите BrushTool, диаметр 400px. Откройте Brushespalette, снизьте значение параметра Roundness. Используйте следующие настройки.
Как создать профессиональный макет сайта в Photoshop

Установите цвет кисти #000000 и добавьте пятно.
Как создать профессиональный макет сайта в Photoshop

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

Выделите нижнюю половину тени и удалите её.
Как создать профессиональный макет сайта в Photoshop

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

Как создать профессиональный макет сайта в Photoshop

Я сократил её вертикально. Далее выровняйте её по центру слайдера. Выберите оба слоя и на панели настроек нажмите кнопку Align Horizontal Centers.
Как создать профессиональный макет сайта в Photoshop

Копируйте тень и поверните её вертикально. Поставьте её в нижний край слайдера.
Как создать профессиональный макет сайта в Photoshop

Создайте кнопки управления слайдером, используя Rectangular Marqee Tool. Залейте цветом #000000.
Как создать профессиональный макет сайта в Photoshop

Понизьте прозрачность (Opacity) кнопок до 50%.
Как создать профессиональный макет сайта в Photoshop

Откройте автофигуры на панели опций и выберите стрелку. Добавьте её на кнопки.
Как создать профессиональный макет сайта в Photoshop

Добавьте полоску. (Е.М.: Высота полоски – 80px.) Залейте цветом #000000.
Как создать профессиональный макет сайта в Photoshop

Понизьте прозрачность (Opacity) до 50%.
Как создать профессиональный макет сайта в Photoshop

Здесь вы можете вставить описание проекта. (Е.М.: Текст: Arial 21px #e0e9cc)
Как создать профессиональный макет сайта в Photoshop

Шаг 8: Добавление приветствия
Здесь будет приветствие и описание веб-сайта.

(Е.М.: Заголовок: Bebas 60px #eef0f0 Shadow; подзаголовок: MyriadPro 40px #eef0f0 Shadow; текст: Arial 15px #1eafb5)
Как создать профессиональный макет сайта в Photoshop

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

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

Шаг 10: Добавление градиента фону
Создайте градиент от светло-серого к белому.
Как создать профессиональный макет сайта в Photoshop

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

Как создать профессиональный макет сайта в Photoshop

Шаг 11: Добавление элементов управления слайдеру
Создайте элементы управления. (Е.М.: Диаметр круга: 13px, цвет: #ababab)
Как создать профессиональный макет сайта в Photoshop

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

Шаг 12: Создание разделителя для контента
Выберите Pencil Tool и нарисуйте линию1px светло-серого цвета (#aaaaaa).
Как создать профессиональный макет сайта в Photoshop

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

Шаг 13: Добавление основного контента
Пора добавить контент. В макете 3 колонки. Мы должны создать 3 одинаковых колонки с отступами между ними. Я сделал простой расчет и разделил пространство на 3 равных блока с отступами 25px между ними.
Как создать профессиональный макет сайта в Photoshop

Добавьте направляющие линии к блокам. Удалите блоки. Получилось 3 колонки.
Как создать профессиональный макет сайта в Photoshop

Добавьте несколько сервисов. Возьмите иконки из набора функциональных иконок. Поддерживайте расстояние между объектами. (Е.М.: Текст заголовка:MyriadPro 26px #666666, основной текст: #9a9a9a).
Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop

Давайте создадим простую кнопку "ReadMore". Выберите Rounded Rectangle Tool, чтобы нарисовать фигуру. Убедитесь, что создался слой с фигурой.
Как создать профессиональный макет сайта в Photoshop

Добавьте градиент (GradientOverlay) и границу (Stroke) кнопке. (Е.М.: Цвет границы: #cdcdcd, текст:Arial 12px #666666)
Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop

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

Мы добавим несколько записей о последних работах. Я нарисовал 3 блока для изображений и сделал им границу 3 px. (Е.М.: Цвет границы: #cdcdcd)
Как создать профессиональный макет сайта в Photoshop

Вставьте изображения в блоки.
Как создать профессиональный макет сайта в Photoshop

Я создал тень, как мы делали раньше, и поместил её под блоками.
Как создать профессиональный макет сайта в Photoshop

Вставим несколько описаний проектов.
Как создать профессиональный макет сайта в Photoshop

Давайте создадим ленту Твиттера. Вставим иконку птички Твиттера.
Как создать профессиональный макет сайта в Photoshop

Добавим сообщение из Твиттера. (Е.М.: Текст твита: Arial 18px #9a9a9a, цвет ссылки: #666666)
Как создать профессиональный макет сайта в Photoshop

Создадим кнопку ”MoreTweets”.
Как создать профессиональный макет сайта в Photoshop

Применим стили.

Как создать профессиональный макет сайта в Photoshop

Как создать профессиональный макет сайта в Photoshop

Вставим текст. (Е.М.: Текст: Arial 18px #565656).
Как создать профессиональный макет сайта в Photoshop

Шаг 14: Создание футера и завершение макета
Создайте выделение для футера и залейте его серым.
Как создать профессиональный макет сайта в Photoshop

Примените Color Overlay. (Е.М.: Цвет заливки: #162623)
Как создать профессиональный макет сайта в Photoshop

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

Как создать профессиональный макет сайта в Photoshop


Результат[/font]
Как создать профессиональный макет сайта в Photoshop

Источник
Кому пригодилась данная статья,поставьте Палец Вверх
biggrin


+71
Просмотры: 14831 VIP ProWebber | Комментарии (11)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Beetemplate

  • 4 мая 2013 13:31
  • Регистрация: 10.04.2013
  • ICQ: --
  • Комментариев: 55
P.S:Кому что-то не понятно ,или сложно,советую начинать с простых макетов.например соц.сетей или поисковиков

--------------------

+1

#2GAMBIT

  • 4 мая 2013 14:54
  • Регистрация: 2.03.2010
  • ICQ: 389872776
  • Комментариев: 34
красавчик! наконец то что то полезное! уважуха ;)

+1

#3Jacob_16

  • 4 мая 2013 16:43
  • Регистрация: 27.01.2013
  • ICQ: --
  • Комментариев: 11
Ну для тех кто мало с фотошопом работает будет очень полезно, а для тех сто в нем много понимает то прокиснуть и все сразу видно)
В общем полезно)

0

#4Steach

  • 5 мая 2013 13:07
  • Регистрация: 25.12.2012
  • ICQ: 460199
  • Комментариев: 17
Автору зачет drink
Давно такого не было. Новичкам то что нужно)

+1

#5Beetemplate

  • 5 мая 2013 16:01
  • Регистрация: 10.04.2013
  • ICQ: --
  • Комментариев: 55
спасибо,очень приятно что людям нравится smile

--------------------

+1

#6DOG

  • 5 мая 2013 19:10
  • Регистрация: 10.10.2009
  • ICQ: 1505837
  • Комментариев: 103
  • Выкл.
Beetemplate,
это вы продаете? http://www.rips.su/sale/2869-enterprice-inc-psd-maket.html

--------------------

0

#7Beetemplate

  • 6 мая 2013 12:06
  • Регистрация: 10.04.2013
  • ICQ: --
  • Комментариев: 55
тему не засоряйте

--------------------

+1

#8zard0nic

  • 8 мая 2013 07:33
  • Регистрация: 18.07.2012
  • ICQ: --
  • Комментариев: 58
Все збс, но под спойлер бы

+1

#9Beetemplate

  • 18 января 2014 20:58
  • Регистрация: 10.04.2013
  • ICQ: --
  • Комментариев: 55
а ты попробуй 84 картинки залить,так еще и под спойлер каждую:)

--------------------

0

#10Vinny_pad

  • 21 марта 2014 21:32
  • Регистрация: 5.07.2013
  • ICQ: --
  • Комментариев: 45
Все супер, только каждый шаг под спойлер добавьте!

--------------------

0

#11batyayura

  • 31 мая 2016 17:43
  • Регистрация: 14.03.2014
  • ICQ: 650043014
  • Комментариев: 10
Норм , я б только как то укоротил текст а то пока просмотрел весь урок глаза начали болеть

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

http://electrongroup.ru

аналоговое видеонаблюдение.

electrongroup.ru


ziemassvetku davana virietim

3dsoap.lv


проекторы по ссылке

lg.com


Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки