Создание макета "Веб 2,0" в Photoshop

Вы научитесь создавать очень фантастический макет сайта «Веб 2,0» в Photoshop, используя навыки начинающих.

Вот что Вы создадите на протяжении этого урока.

1. Создайте новый документ с размерами 1280х1024 pixels. Заполните фон белым цветом (#FFFFFF).

2. Выберите «rectangular marquee tool (инструмент прямоугольник)» и нарисуйте прямоугольник высотой в 455 pixels. Это будет наш рекомендуемый контент. Заполните его светло-голубым цветом (#B3DDFB).

После этого нарисуйте новый прямоугольник вверху документа – это будет заглавие веб-сайта. Можно его сделать высотой в 89 pixels и цветом #3399CC.

Последняя часть – это сделать нижний колонтитул («подвал»). Просто нарисуйте прямоугольник в нижней части документа и заполните его серым (#7E8081).

Вы получите что-то вроде этого:

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

Создайте новый слой и назовите его «навигация».

Выберите инструмент «закругленный прямоугольник (rounded rectangle tool)» с радиусом в 10 рх и нарисуйте прямоугольник, который будет служить меню навигации. Фоновый цвет должен быть таким же, как и в рекомендуемом контенте (#B3DDFB). В окне слоев кликните на новосозданном слое и выберите в меню «растрировать слой (Rasterize layer)».

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

5. Теперь давайте разработаем другой стиль для активной вкладки. С помощью «закругленного прямоугольника (rounded rectangle tool)» нарисуйте такой же как и раньше закругленный прямоугольник, но белый (#FFFFFF), как и цвет фона.

6. После создания активной вкладки, нажмите на нее на окнах слоев и выберите параметры наложения (Blending options) с выпадающего меню. Выберите градиент со следующими параметрами:

Ваша навигация теперь должна выглядеть так:

7. Добавьте текст в вашу активную вкладку. Я выбрал размер 24 pt шрифта “Arial rounded” с цветом #3399CC. Наше меню готово.

8. Следующим шагом является создание 3 пронумерованных шагов, описывающих, какой классный у Вас продукт. Создайте новый слой и назовите его "Числа".

9. Выберите инструмент «эллипс (Elipse tool)» и нарисуйте круг, зажав Shift, с белым фоновым цветом (#FFFFFF). После выберите «инструмент текст (text tool)» и напишите две строки текста. В PSD, я использовал шрифт 24pt #3399CC Arial Rounded.

10. Измените шрифт на 60 pt. На рисунке это единица в белом кругу.

11. Повторите шаги 8, 9, 10 пока не получите 3 разных пронумерованных шагов. Это должно выглядеть так:

12. Теперь пора вставить видео-презентацию продукта. Я просто взял скриншот Vimeo видео, и масштабировал его до 401 * 289 пикселей.

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

14. Выберите инструмент «текст (text tool)» и напишите название пункта. Я выбрал шрифт Arial Rounded 24pt, с цветом #7E8081.

15. Выберите инструмент «линия (line tool)» и нарисуйте линию ниже названия пункта таким же цветом, что и название (#7E8081).

16. Напишите текст пункта. Выберите инструмент «текст (text tool)» и нарисуйте площадь, которую заполните текстом. Она должна быть той же ширины, что и линия, нарисованная раньше.

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

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

19. Сейчас мы имеем дизайн, который начинает очень хорошо выглядеть. Хотя мы пропустили две важных части – колонтитул и логотип. Начнем с логотипа. Поставьте курсор в заглавии и дайте название Вашему "web 2.0". Я выбрал “WidgetCreator”, которое звучит очень модно для web 2.0, но подбирайте еще лучшее название)). Я использовал белый цвет шрифта Arial Rounded 30pt, чтобы сделать логотип простым и минималистическим.

20. Для иконки логотипа я взял это изображение (this image).

21. Последний шаг этого урока – это колонтитул. Просто выберите белый цвет шрифта Arial 18pt. Убедитесь, что он выровнен по центру страницы.

Другая идея для колонтитула – добавить логотипы спонсоров. Не бойтесь экспериментировать!

И вот наш окончательный результат.

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