Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Макет технического сайта, веб-дизайн

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Макет технического сайта, веб-дизайн


 
Опции учебника
Макет технического сайта, веб-дизайн

Предыдущий учебник Макет технического сайта, веб-дизайн Следующий учебник
Опубликовал(а) Gostemilov
23.06.2015
Макет технического сайта, веб-дизайн

Результат:


Создайте новый документ.
Размер документа: 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

Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 55
Сообщений: 92,014
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Оригинал урока
demiart.ru/forum/index.php?showtopic=23991
 



Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
Дизайн сайта-портфолио 2, дизайн сайта Gostemilov Необработанные уроки Photoshop 0 23.06.2015 21:00
Макет военного сайта, веб-дизайн Gostemilov Необработанные уроки Photoshop 0 23.06.2015 08:50
Волшебная шапка для сайта, дизайн "шапки" для сайта (блога) Gostemilov Необработанные уроки Photoshop 0 22.06.2015 21:45
Макет сайта недвижимости, дизайн сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 15:10
Дизайн сайта в DJ стиле, DJ Layout #2, дизайн, макет Веб-Сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 08:05

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 13:59. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 14.29%).