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

[web-design]

Результат:


Создайте новый документ.
Размер документа: 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), нарисуйте форму в верхнем углу сайта:



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




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



Автор: talk-mania.com
Перевод: Nastia

@темы: Уроки, Web-дизайн