Красивый дизайн сайта с нуля

Опубликовано Июн 10, 2012 в Дизайн сайта, Создание сайтов | Нет комментариев

Красивый дизайн сайта с нуля

Вы когда-нибудь хотели создать красивый сайт, но просто не знаете как? Честно говоря, несколько лет назад, тоже самое случилось со мной. В то время просматривая веб-страницы я увидел, очень, красивый сайт, но не хватало навыка для создания таких проектов. Сегодня я могу и научу вас делать тоже самое. Для этого требуются небольшие знания Photoshop и внимания к  деталям. С помощью этого урока, я покажу эти маленькие детали, которые делают дизайн сайта красивым. Запустите Photoshop и начнем!

 

 

Шаг 1 — Скачать 960 Grid System

Основой многих проектов является CSS каркас «960 Grid System» (подробное описания данного фреймворка можно прочитать на странице 960 Grid System). Поэтому, прежде чем мы начнем нужно скачать плагин для Photoshop. Данный плагин входит в состав фреймворка, который можно скачать с официального сайта 960.gs. Распакуйте архив и в папке «templates->Photoshop» найдете файлы шаблонов с расширением psd. Вы увидите три вида шаблонов: 12_col, 16_col и 24_col. Разница между ними, как видно из названия, они сделаны для двенадцати, шестнадцати и двадцати четырех колонок. Объясню немного подробнее, если у вас в дизайне три блока нужно выбирать шаблон на 12_col сетке, потому что 12 делится на три равные части, если в дизайне четыре блока нежно выбирать шаблон с 12_col или 16_col сеткой, так как и 12 и 16 делится на равные части. Дальше мы увидим как пользоваться этим руководством на практике.

Шаг 2 — Определение структуры

Прежде чем открыть PSD шаблон фреймворка «960 Grid System» и начать рисовать, определим структуру структуру нашего сайта.

Шаг 3

После того как определили структуру сайта, нужно открыть 16_col.psd шаблон в программе Photoshop. Перейдите к Изображение > размер Холста ( Image > Canvas size). Установить размер в 1200px ширина и 1700px высота. На вкладке слои, если еще нет фона, добавьте фоновый слой с цветом «#ffffff».

Шаг 4

В панели инструментов выбирать » Прямоугольник «(Rectangle Tool) и нарисуйте в прямоугольник по всей ширине полотна около 80px высота. Заполните его цветом #dddddd.

Шаг 5

Создайте новый слой над слоем с прямоугольником и установите режим слоя на Перекрытие. Ctrl + клик по слою с прямоугольником. Прямоугольник выделится (по краю прямоугольника появится пунктирная линия). Выберите мягкую кисть и установите размер 600px, установите белый цвет и нажмите несколько раз краем кисти  на, выделенном прямоугольнике, как показано на изображении. Таким образом, вы создать красивый световой эффект свечения. Кроме того, вы можете связать эти два слоя.

Шаг 6

Новый слой. Выберите инструмент Прямоугольник (Rectangle tool) и снова  нарисуйте тонкий темно серый прямоугольник, как показано на рисунке.

Шаг 7

С выбранным инструментом прямоугольник (Rectangle), нарисуйте  прямоугольник высотой 575px вокруг отступив 500px от верхнего прямоугольника. В нижней части вкладки слои выбираем » fx» в открывшемся списке выбираем наложение градиента. Устанавливаем параметры: линейный градиент от #d2d2d0 до #ffffff , угол 90, масштаб 100%.

Шаг 8

Создаем световой эффект, подобно тому, что сделано на шаге 5.

Шаг 9

Создайте новый слой и нарисуйте большой прямоугольник высотой около 400px.  Залейте его синим градиентом от #2787b7 до #258fcd.

Шаг 10

 

Добавить темно-синюю  линию высотой 1px  в нижней части синего прямоугольника, применить эффект тени. Для тени используется Режим: Умножение (Multiply), Непрозрачность (Opacity): 65%, угол: -90, Смещение (Distance): 1px и размер (Size): 6px. Затем создайте новый слой выше и сделать еще одну белую линию высотой 1px под темно-синей. Таким образом мы создаем острые края для нашего содержимого. Вы можете применять эту технику создания границ во всех блоках вашего дизайна, просто, меняя цвет.

Шаг 11

Создайте новый слой и с помощью инструмента Прямоугольник  (Rectangle Tool), нарисуйте прямоугольник высотой 50 пикселей в верхней части холста, как показано на рисунке. Этот блок будет использоваться для навигации.

Нанесите тени. Используйте значения, показанные на рисунке.

Шаг 12

Время для навигации. На панели инструментов нужно выбрать прямоугольник с закругленными углами (Rounded Rectangle Tool), установить радиус 5 пикселей. Нарисуйте прямоугольник, залейте его цветом # f6a836,и примените следующие эффекты:

  • Внутренняя тень (Inner Shadow) — цвет: # FFFFFF, Режим наложения: перекрытие (Blend Mode: overlay), непрозрачность 60%, Угол обзора: 120 *, смещение: 7px, Размер: 6px.
  • Внутреннее свечение (Inner Glow — Blend), Режим наложения: нормальное (Mode: Normal), цвет: # FFFFFF, Размер: 4px. Все остальное оставить по умолчанию.
  • Обводка (Stroke) — Размер: 1px, Положение: внутри (Position: inside), цвет: # ce7e01.

 

Теперь выберите прямоугольник Ctrl + клик. Перейти к выделение>модификация>сжать (Select> Modify> Contract) и введите 1px.

Создайте новый слой, установите режим перекрытие (Overlay), создайте эффект описанный в шаге 5, используя, меньший размер кисти. Затем добавить навигацию по тексту. В данном примере, для навигации, используется шрифт Arial без сглаживающих эффектов.

Шаг 13

Сейчас создадим поле для поиска. Выбрав инструмент прямоугольник (Rectangle Tool) с скругленными углами радиусом 5px, создайте поле для поиска с правой стороны нашей сетки и посередине серой полосы сделанной на четвертом шаге.

Добавьте стили слоя:

Внутренняя тень (Inner Shadow) — цвет: # 000000, режим наложения: умножение (Multiply), непрозрачность (Opacity): 9%, Угол обзора: 90 °, смещение: 0px, Размер: 6px.

Обводка (Stroke) — Размер: 1px, положение (Position): внутри, цвет: # DFDFDF.

Добавим в поле для поиска текст «Искать» и кнопку «GO». В итоге должно получиться:

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

Шаг 14

создаем регистрационное поле

Создадим новый слой с надписью «Вход» (Sign Up), это будет кнопкой для входа на сайт, так же мы создавали поле для поиска, но шириной вдвое больше. Поместите под полем  поиска в середине, а также в центре блока навигации.

Кнопка входа на сайт с эффектом

Снова создадим эффект подобно сделанному на шеге 5, использовав кисть меньшего размера в данном случае 45px.

Шаг 15

Дизайн после добавления слогана и логотипа

Так  выглядит дизайн сайта после добавления логотипа и слогана.

Шаг 16

Поместим все файлы проекта в папки

Снова наведем порядок в проекте создав папку с именем «top_bar» и поместив нее все файлы верхней части макета(логотип, слоган, поле поиска, регистрации кнопки навигации и фона).

Также нужно создать еще одну, пустую, паку с названием «header» .

Шаг 17

эффект свечения для всей верхней части

Первое, что сделаем поместим заголовок окна (больной синий прямоугольник) в папку «header».

Создадим эффект свечения для заголовка — для этого, нужно, в папке «header» создать новый слой с режимом наложения.

Возьмите большую мягкую кисть 600px, цвет # FFFFFF и нажмите несколько раз в область  навигации.

Шаг 18

На данном шаге сделаем изображение для заголовка с отражением. Для этого понадобятся два скриншота сайтов, которые нужно разместить один над другим, смасштабировав последний, для получения эффекта отдаленности. На втором этапе нужно сделать тень, которая привнесет эффект объема и увеличит привлекательность изображения. Для этого нужно скопировать оба слоя и перетащить их в низ поместив под основное изображение,  а затем поочередно инструментом трансформирование (редактирование->трансформирование контура) повернуть на 90 градусов.

Продолжение следует, но ваши комментарии, напрямую, влияют на то как скоро статья будет дописана

Оставить комментарий

Ваш e-mail не будет опубликован.