Создание сайта в фотошопе. Рисуем макет сайта

1r

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

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

Исходные материалы: Упаковка с софтомИконки

  • 1. Создаем новый документ 1200×1200 пикс. Цвет заливки сделаем #d6d6d6, цвет фона #efefef. После берем инструмент Градиент:

2r

  • 2. Делаем заливку холста сверху вниз на 250-300 пикселей.

3r

  • 3. Выбираем инструмент Прямоугольная область и создаем выделение высотой примерно 160-170 пикс. на всю ширину изображения.

4r

  • 4. Устанавливаем цвет заливки #483f38, цвет фона #1e1916, и опять берем инструмент Градиент, но стиль уже выставляем на Зеркальный

5r

Из середины прямоугольного выделения делаем заливку к любой из его сторон. Затем идем в Фильтр > Шум > Добавить шум

6r

  • 5. Инструментом Текст создаем наш заголовок и слоган. Цвета шрифта я указал в самой картинке.

7r

Заходим в Параметры наложения нашего заголовка и делаем следующее:

Тень (режим умножение):

8r

К одному из слов заголовка применим Наложение градиента (режим — нормальный, стиль — линейный)

9r

Примерно вот так:

10r

  • 6. Берем инструмент Прямоугольник с закругленными углами (радиус 10пикс.) и создаем фигуру в правой части нашей шапки:

11r

В Параметры наложения фигуры:

Тень:

12r

Внутренняя тень (режим — умножение):

13r

Наложение цвета:

14r

  • 7. Подписываем наши разделы:

15r

  • 8. Сейчас мы будем создавать основную навигацию. Перед этим, нам нужно отделить область шапки. Инструментом Прямоугольная область или Горизонтальная строка создаем две 1-пиксельные линии чёрного и белого цвета друг под другом. Эти линии должны быть расположены сразу под шапкой.

16r

Выбираем инструмент Прямоугольник с закруглёнными углами и рисуем фигуру:

17r

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

Тень (режим — умножение):

18r

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

19r

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

20r

Создаем ещё один прямоугольник внутри, высотой в половину первого. Цвет #ffffff

21r

Устанавливаем Непрозрачность слоя на 5%. Теперь нам требуется создать новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш рисуем вот такой узор чёрного цвета:

22r

Отлично, теперь переходим в меню Редактирование > Определить узор (Edit > Define Pattern) и сохраняем узор под именем “Диагональные линии”.
Возвращаемся в основной документ и делаем выделение основного прямоугольника навигации (Ctrl+левая кнопка мыши), создаем новый слой и заливаем выделение узором при помощи инструмента Заливка. Непрозрачность слоя – 10%.

23r

  • 9. Инструментом Горизонтальный текст пишем названия наших разделов навигации. В правой области навигации создаем прямоугольник с закругленными углами (радиус 5 пикселей)

24r

Далее в Параметры наложения:

Тень:

25r

Внутренняя тень (режим — умножение):

26r

Наложение цвета:

27r

Добавляем иконку поиска и следующий текст:

28r

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

29r

Справа от текста вставляем нашу упаковку с софтом:

30r

Делаем копию упаковки, с помощью клавиш Ctrl+T уменьшаем ее размер, располагаем ее сзади оригинала и применяем: Фильтр > Размытие > Размытие по Гауссу (1 пикс.)

31r

Повторяем эту операцию еще один раз:

32r

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

33r

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

34r

  • 11. Создаем две 1-пиксельные линии:

35r

Создаем выделение прямо под ними:

36r

Устанавливаем цвет заливки — #e6e6e6, цвет фона — #efefef, и делаем заливку линейным градиентом сверху вниз.

37r

  • 12.Под разделителем слева рисуем прямоугольник с закруглёнными углами:

38r

Далее в Параметры наложения:

Внутренняя тень:

39r

Наложение градиента:

40r

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

41r

Заполняем текстом этот прямоугольник:

42r

  • 13. Справа от прямоугольника пишем немного текста и можно вставляем наши, заранее скаченные иконки:

43r

  • 14. Теперь будем делать футер. Итак, делаtv копию шапки и опускаем её вниз. Немного сжимаем его и копируем разделительную линию, ну и немного информации в футер не помешает — тут уже полностью на ваше усмотрения, решите, что вы хотите там видеть и сделайте именно так.

44r

Всем до встречи, встретимся в новых уроках!

Итог

1283034758_final

Один комментарий к записи «Создание сайта в фотошопе. Рисуем макет сайта»

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

Добавить комментарий для Nrianaccf Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *