Загрузка. Пожалуйста, подождите...
Вот скриншот дизайна, мы будем создания.
В этом учебнике, я буду считать, что у вас есть базовые знания Photoshop и знают, как делать основные задачи, такие как добавление текста, используя формы и размеров / вращающихся объектов.
Моя цель в этой Прохождение показать, что вы не всегда нужно много фантазии эффектов в конструкции сделать красивый шаблон. С помощью пары шрифты и некоторые тонкие эффекты, она по-прежнему можно создавать профессионально выглядящие дизайн что будет впечатлить ваших посетителей.
Дизайн мы собираемся построить имеет заголовок, содержащий название компании и навигации. Ниже это та область, которая подчеркивает, что дела пойдут вместе с некоторыми дополнительными данными.
После этого, есть раздел, описывающий конкретные услуги более подробно. Раздел под это некоторые клиентские отзывы и признакам обзор проекта.
Мы также хотим, чтобы попытаться построить доверие, за счет использования некоторых клиентских отзывов и пример "признакам проект".
Наконец, у нас есть простая колонтитула в нижней части, которая содержит некоторые довольно стандартные авторские права текста.
1 Создайте новый документ размером 1100 × 1100px. Затем добавить вертикальные направляющие на 70px и 1030px - это дает нам ширина 960px, которая должна легко помещаться на всех экранах.
2 Чтобы создать заголовок, мы в первую очередь необходимо добавить фон. Выберите Rectangle Tool (U), установить в качестве основного цвета очень темно-серый цвет (# 333333), а затем нарисовать прямоугольник с левой стороны документа, право, что составляет около 130px по высоте.
3 Чтобы добавить название компании, установить шрифт Myriad Pro. Установить размер шрифта 60px, цвет светло-серый (# EEEEEE), и расстояние между буквами до 40px. Вы можете задать все эти варианты в характере Группа (Window> символов). С Horizontal Type Tool (T), введите имя и должность его от левой направляющей.
4 Чтобы добавить области навигации установить шрифт Arial. Размер шрифта 16px и цвет # EEE. Введите несколько имен страниц (например, дом, О и т.д.), разделенных двумя hypens (-):
5 Чтобы создать раздел признакам содержания, мы должны начать с добавления заголовок признакам содержания. Установите шрифт Myriad Pro, начертания шрифта полужирное, шрифт размером 60px, расстояние между буквами до 40px, и цвет # 333333. Введите название в с Horizontal Type Tool (T).
6 Для того чтобы сделать заголовок выделить немного больше, мы изменим цвет амперсанд (и) в красивый синий (# 00BFF3).
7 Под этим, мы должны добавить подзаголовок. Установите шрифт Myriad Pro, начертания шрифта, чтобы страны, размер 50px, и цвет # BBB. Тип субтитров и положения, которое он только под заголовком.
8 Теперь мы хотим, чтобы добавить краткий обзор того, что делает компания. Возьмите Horizontal Type Tool, установите размер шрифта 30px, цвет # CCCCCC и типа серии точки (.) С левой направляющей с правой стороны.
9 Создание копии (выбор текстового слоя в панели слоев и нажмите Ctrl + J) этой пунктирной горизонтальной линии, а затем поместить его около 40px под первой линии.
10 Теперь нам нужно добавить текст между этими линиями. Установите шрифт Myriad Pro, размер шрифта в 34px, цвет # 555555, расстояние между строчками 42px, расстояние между буквами до 40px, а затем ввести несколько строк текста. Вы можете использовать генератор Lorem Ipsum просто манекен получить текстовое содержимое быстро.
11 Вы также можете выделить некоторые ключевые слова и сделать их начертания шрифта смелый, чтобы дать им больше внимания, и я выбрали слова "первый класс" и "большое влияние".
12 Теперь мы хотим, чтобы добавить некоторые более конкретные сведения о наших услугах. Выберите Rectangle Tool с Панели инструментов, установите цвет переднего плана на # 00AEEF и нарисуйте прямоугольник форме, что составляет около 280 × 350 пикселей размера, расположенные на левой руководства.
13 Чтобы сделать этот квадрат, выделяются еще немного, мы добавим тень слоя капли стиль (дважды щелкните по миниатюре слоя в панели слоев, чтобы получить доступ к стили слоя диалогового окна), установить цвет dropshadow, где цвет установлен в серый цвет (# AAAAAA).
Ваши окна должны теперь иметь немного больше внимания.
Выберите Horizontal Type Tool и установите шрифт Myriad Pro, начертания шрифта, чтобы страны, размер шрифта 40px, а цвет текста на белый (# FFFFFF). Нарисуйте поле от левой границы окна справа и установить выравнивание текста центр. Затем введите в названии.
15 Теперь установить размер шрифта 18px и типа серии периодов, которые станут пунктиром.
16 После этого установите размер шрифта 15px и нарисуйте текстовое поле в левой части окна, справа от него. Введите текст с описанием услуг.
17 Наконец, нам необходимо добавить кнопку в нижней части этого окна. Select the Rectangle Tool, set the color to a blue color ( #0076A3 ), and draw a box that is around 230×40px in size. Выберите Rectangle Tool, установите цвет синий цвет (# 0076A3), а также нарисовать прямоугольник, что составляет около 230 × 40px в размерах.
18 Добавить Внутренний эффект свечения на кнопку, где цвет установлен в более темный оттенок синего - я использовал # 235162.
19 Теперь добавьте ярлык на кнопку. Установить размер шрифта 18px и введите в верхнем регистре ", получить более подробную информацию>>".
Это первое окно создано.
20 Создайте две копии этой коробки, дублируя первый ящик и все содержащиеся в ней. Используйте Move Tool (V), чтобы пространство их равномерно. Кроме того, изменить данные в каждом из окон.
21 Чтобы закончить эту часть макета, снять копию большого пунктирной линией, которую мы создали в предыдущем шаге, и добавить его в нижней части разреза.
22 Для отзывы разделе клиента, мы сначала должны создать заголовок. Установите шрифт Myriad Pro, размер 24px, цвет темно-серый (# 555555), а затем типа "Клиент Отзывы" с Horizontal Type Tool (T).
23 Теперь первое свидетельство фото автора, выберите Rectangle Tool, установите цвет светлый серый цвет (# CCCCCC), а также нарисовать прямоугольник, что вокруг 84 × 84px.
24 Теперь добавить фото из своего, немного меньших размеров. Добавить фото в слой над слоем фона.
25 Далее, нам необходимо добавить некоторый текст рядом с фото. Установите шрифт Arial, размер шрифта 14px, цвет темно-серый, мы использовали для названия раздела отзывы клиентов (# 555555), а затем наберите какой-нибудь фиктивный текст (опять же, вы можете использовать Lorem Ipsum для этого) .
26 Теперь, установите шрифт Bold вес и тип имя автора. На следующей строке введите автора принадлежности (т.е. имя своей организации / компании) и установить цвет ярко-синий (# 00AEEF).
27 Принимайте все элементы, используемые для создания первого свидетельство и создать две копии. Расположите их друг под другом с последовательным интервал и изменить содержание и изображения.
28 Теперь нам нужно добавить вертикальные разделитель справа от свидетельство разделе. Создайте копию пунктир мы создали ранее, и удалить около половины периода. Поворот линии около 90 ° градусов (Edit> Transform> Rotate 90 ° КНО) и поместите его справа от раздела отзывы клиентов.
29 Чтобы создать наши прославленные области проекта, прежде всего мы должны добавить название. Установите шрифт Myriad Pro, размер 24px, цвет темно-серый (# 555555), а затем введите "Избранные проекта".
30 Now add a title for the featured project. 30 Теперь добавим заголовок для признакам проекта. Установить размер шрифта на 20 пикселей, цвет серый цвет (# 888888) и введите название.
Под этим названием, мы должны скриншот проекта, что составляет около 430 × 200px.
31 Затем добавить некоторый текст, который приводится краткий обзор проекта. Установите шрифт Arial, размер шрифта 14px, цвет текста на темно-серый (# 555555) и введите несколько строк содержимого.
32 Кроме того, включить какой-либо текст в нижней части, что говорит что-то вроде "Нажмите здесь для более подробной информации".Изменение цвета этот текст в светло-синий (# 00AEEF).
33 Наконец, добавьте еще одну копию пунктирные горизонтальные линии в нижней части этого раздела.
34 колонтитул очень проста для завершения. Установите шрифт Arial, размер шрифта 16px, цвет # 888888, а также ввести некоторые колонтитул содержание.
Это все, что делается!
В этом учебнике, я надеялся, чтобы показать, что вы не всегда нужно много фантазии эффекты, чтобы создать красивый дизайн. Иногда пара шрифтов и цветов, в сочетании с некоторыми тонкие эффекты могут делать работу хорошо.
Позвольте мне знать, если у вас есть какие-либо вопросы или если что-то неясно, и я все возможное, чтобы ответить на них в комментариях. В следующей части этого урока, я покажу вам, как создавать XHTML шаблон из этой конструкции.
