Блог о дизайнеФлешКак создать аккуратный минималистичный дизайн?

Как создать аккуратный минималистичный дизайн?

5.08.2010 5679 сосредоточена, услуги, бизнес, шаблона, бизнес, широкий, цель, странице, рабочего, шаблона, содействовать, php

Конечный результат

Вот скриншот дизайна, мы будем создания.

Конечный результат

Обзор

В этом учебнике, я буду считать, что у вас есть базовые знания Photoshop и знают, как делать основные задачи, такие как добавление текста, используя формы и размеров / вращающихся объектов.

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

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

После этого, есть раздел, описывающий конкретные услуги более подробно. Раздел под это некоторые клиентские отзывы и признакам обзор проекта.

Мы также хотим, чтобы попытаться построить доверие, за счет использования некоторых клиентских отзывов и пример "признакам проект".

Наконец, у нас есть простая колонтитула в нижней части, которая содержит некоторые довольно стандартные авторские права текста.

Создание документа

1 Создайте новый документ размером 1100 × 1100px. Затем добавить вертикальные направляющие на 70px и 1030px - это дает нам ширина 960px, которая должна легко помещаться на всех экранах.

Создание документа

Сделать Заголовок

2 Чтобы создать заголовок, мы в первую очередь необходимо добавить фон. Выберите Rectangle Tool (U), установить в качестве основного цвета очень темно-серый цвет (# 333333), а затем нарисовать прямоугольник с левой стороны документа, право, что составляет около 130px по высоте.

Сделать Заголовок

Добавить сайт Имя / Logo

3 Чтобы добавить название компании, установить шрифт Myriad Pro. Установить размер шрифта 60px, цвет светло-серый (# EEEEEE), и расстояние между буквами до 40px. Вы можете задать все эти варианты в характере Группа (Window> символов). С Horizontal Type Tool (T), введите имя и должность его от левой направляющей.

Добавить сайт Имя / Logo

Сделать навигации

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 Наконец, добавьте еще одну копию пунктирные горизонтальные линии в нижней части этого раздела.

Создание проекта Рекомендуемые Раздел

Сделать Footer

34 колонтитул очень проста для завершения. Установите шрифт Arial, размер шрифта 16px, цвет # 888888, а также ввести некоторые колонтитул содержание.

Создание проекта Рекомендуемые Раздел

Все завершенные

Это все, что делается!

Конечный результат

Вёрстка

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

Позвольте мне знать, если у вас есть какие-либо вопросы или если что-то неясно, и я все возможное, чтобы ответить на них в комментариях. В следующей части этого урока, я покажу вам, как создавать XHTML шаблон из этой конструкции.