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

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

Tutorial

автор: Оксана Девочкина

25 October 2012 года

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

1. Сетка

Для начала нужно скачать сетку. Одним из простых способов являются сайты, где можно взять готовые. Скачав бесплатно исходники на сайте 960, выберите документ .psd с 16 колонками. На его основе мы и создадим главную страницу. Постарайтесь, чтобы эти колонки у вас были всегда на верхнем слое. Направляющие вы можете включать и выключать шоткатами (Cmd+Ж).

2. Размер

Установим размер 1200пикс. на 1300пикс. Image > Canvas Size

3. Цвет

Сделаем заливку цвета #ADBFCA, и прибавим к слою прозрачного градиента. Для этого нужно дважды кликнуть по иконке слоя в панеле Layers. Установите параметры, как на скриншоте (Gradient> Overlay> 40% Opacity)

Ради разнообразия можно, используя полупрозрачную мягкую белую кисть в отдельном слое сделать пятно наверху — эффект слабого свечения на месте будущего логотипа.

4. Лого

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

5. Меню

Используя Rounded Rectangular Tool (U) из панели инструментов, создайте область меню цвета #dcdcdc под логотипом, опять же придерживаясь условных линий. И придайте этому слою эффекты тени, градиента и объема, как указано на скриншотах.

6. Закладки

Напечатаем «Главная» цветом #a9a9a9 и придадим закладке эффект слабого градиента. По такому же принципу сделайте остальные необходимые закладки.

Разделители между словами. С помощью инструмента Line Tool (U) создайте линию в 1px цвета #F3F3F3 и одну слоем выше цвета #B8B8B8. Когда они рядом, получиться эффект внутреннего объема! Сгруппируйте два слоя, и дублируйте их между остальными слоями.

7. Поиск

Используя инструмент закругленного прямоугольника (U) создадим область на панеле меню с обводкой цвета #c6c6c6. Подсказка «Что ищите?» цвета #a9a9a9 придаст эмоционального характера.

Найдем иконку поиска бесплатно, и придадим ей необходимый эффект как на скриншоте.

8.Баннер

С помощью закругленного прямоугольника (U) создайте область баннера, и придайте ему те же эффекты, что и панели меню (правая кнопка мыши по иконке слоя, copy layer style> paste layer style).

Поле заголовка. Используя инструмент прямоугольник (U), создайте область поверх баннера цвета #cbcbcb. Придайте такие тени и объемы apste, как на баннере (copy layer style> paste layer style). А затем, щелкнув по слою правой кнопкой мыши, нажмите Create Clipping Mask.

Заголовок. Наберите текст цвета #a9a9a9 придайте те же эффекты, что и закладкам. В качестве баннера вы можете использовать описание услуг (3-4 слайда) или акций. Постарайтесь выбрать имиджевые фотографии, которые удачно описывают род деятельности компании.

9. Проекты

Наберите текст кнопок или названий проектов, придерживаясь сетки. Придайте им те же эффекты, что и закладкам (copy layer style> paste layer style). Разделители те же, как и в меню. Скопируйте их. Трансформируйте (Сmd+T) и разверните на 90°, придерживая Shift. Темную линию наверх, светлую ниже.

10. Услуги

Повторите те же махинации, что и с «Баннером», поменяйте заголовок. Определите количество колонок в блоке, опираясь на сетку. Скопируйте разделители из меню и трансформируйте (Cmd+T) по длине. Расставьте 4 разделителя между колонок (Alt+Shift+перетягивайте мышью, ровно копируя разделители)

11. Кнопка «Подробнее»

Создайте область для кнопки цвета # f1f1f1 и придайте ей эффекты. Поверх напишите текст «Подробнее», цвет # afafaf.

12. О нас

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

13. Контакты

Создайте блок «Контакты» по принципу баннера слева от блока «О компании». Скопируйте стили поля ввода из «Поиска» (см. п.7), сделайте поля контактов: Имя, Email и сообщение. Не забудьте кнопку «Отправить», которую можно переделать из кнопки «Подробнее». Сайт уже почти готов!