суббота, 23 января 2016 г.

Создание макета технического сайта

Макет технического сайта


Создайте новый документ.
Размер документа: 760x770 px.
Фон: белый.

Используя Rectangle Tool, нарисуйте 2 прямоугольника, как показано на рисунке:

Макет технического сайта

Для слоя верхнего прямоугольника установите следующие стили:

Макет технического сайта


Макет технического сайта


Затем растеризуйте слой ( Layer > Rasterize > shape )

Выберите line Tool (установите weight 1 px).
Установите цвет переднего плана (foreground color) #282828 и нарисуйте линию в середине верхнего прямоугольника.
Установите стиль слоя с линией, как показано ниже:

Макет технического сайта

Результат:

Макет технического сайта


Поместите глобус на заголовке сайта:

Макет технического сайта


Затем под слоем с глобусом нарисуйте круглую форму:

Макет технического сайта

Для слоя с формой добавьте следующие стили:

Макет технического сайта



Макет технического сайта


Макет технического сайта


Это мой результат. Вы также можете видеть, что я добавил текст в заголовок сайта:


Макет технического сайта



Выберите слой с линией посредине заголовка и растеризуйте его:

Макет технического сайта


Используя Eraser tool (выберите большую круглую кисть) удалите части линии около логотипа с глобусом:

Макет технического сайта

Выберите Rounded Rectangle Tool, установите радиус 20 px и нарисуйте форму с правой стороны вашего макета:

Макет технического сайта


Добавьте следующие стили слоя:

Макет технического сайта


Макет технического сайта

Макет технического сайта



Результат:

Макет технического сайта

Дублируйте слой несколько раз и поместите как на рисунке (Примечание: чтобы дублировать слой нужно выбрать слой и нажать CTRL+J):

Макет технического сайта


Добавьте текст:

Макет технического сайта

С помощью rectangle Tool нарисуйте маленький прямоугольник:

Макет технического сайта


Затем Edit > Transform Path > Warp (эта опция доступна только в версии CS2 или выше).
Делаем следующие установки:

Макет технического сайта

После того как вы нажмете ENTER, ваша форма должна быть похожа на эту:

Макет технического сайта


Нарисуйте маленький круг, используя Ellipse Tool, и поместите его как показано на рисунке:

Макет технического сайта


Разместите нарисованную ранее дугу, как показано на рисунке:

Макет технического сайта


Продублируйте слой с маленьким кругом и поместите его с другой стороны:

Макет технического сайта


Для маленького круга с правой стороны добавьте стиль слоя:

Макет технического сайта


Результат:

Макет технического сайта

Теперь выберите маленький круг с левой стороны и добавьте следующий стиль слоя:

Макет технического сайта

Результат:

Макет технического сайта


Для дуги добавьте следующие стили слоя:

Макет технического сайта


Макет технического сайта



Макет технического сайта


Макет технического сайта


Результат:

Макет технического сайта


Сгруппируйте эти 3 элемента (маленькие круги и дугу). Продублируйте и разместите, как показано на рисунке:

Макет технического сайта



Теперь добавьте изображение на белую область. Я добавил 3D, а вы добавьте свое изображение.

Макет технического сайта

Установите белый цвет переднего плана (foreground color), выберите Line tool (weight =3px) и нарисуйте 2 горизонтальных линии в заголовке сайта:

Макет технического сайта


Затем сверху и снизу линий в 3 рх добавьте линии в 1 рх:

Макет технического сайта


Выберите Rounded Rectangle Tool, установите радиус в 30рх и создайте большую форму:

Макет технического сайта

Для формы добавьте следующие стили слоя:

Макет технического сайта


Макет технического сайта


Выберите Rounded rectangle tool, установите радиус в 210px и создайте две формы, как показано на рисунке:


Макет технического сайта


Для этих двух форм добавьте стили слоя:

Макет технического сайта



Макет технического сайта



Макет технического сайта



Макет технического сайта



Добавьте текст:

Макет технического сайта


Затем дублируйте несколько раз группу с кругами и дугой (из верхнего меню) и разместите с левой стороны макета:

Макет технического сайта



Теперь добавьте между кнопками точки. Вы можете сделать это при помощи образца:

Макет технического сайта


Используя Rounded Rectangle tool ( radius = 20 px), нарисуйте форму в верхнем углу сайта:

Макет технического сайта


Добавьте текст:

Макет технического сайта


Получим, окончательный результат:

Макет технического сайта


Комментариев нет:

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