Главная Регистрация Вход
Приветствую Вас Гость!


Главная » 2011 » Январь » 12 » Дизайн сайта-портфолио 2
13:41
Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2


Дизайн сайта-портфолио 2 \ Website design portfolio 2

Часть 1.

Результат:

Дизайн сайта-портфолио 2

1. Создайте новый файл размера 800x720 px 72 dpi.

Создайте новый слой и залейте градиентом

Дизайн сайта-портфолио 2

Параметры градиента:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2


2. Используя Rounded Rectangle Tool (U), создайте на новом слое основную панель сайта, как показано на рисунке:

Дизайн сайта-портфолио 2

Установите следующие параметры слоя:

Blending Options>Gradient Overlay:

Дизайн сайта-портфолио 2


Параметры градиента:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2


3. Используя Rounded Rectangle Tool (U), на новом слое нарисуйте кнопку панели меню в заголовке сайта и поверните ее (Ctrl+t). Цвет кнопки #C92130.

Дизайн сайта-портфолио 2

Установите следующие параметры слоя:

Blending Options>Stroke:

Дизайн сайта-портфолио 2

Сделайте 4 копии слоя с кнопкой и установите цвета кнопок, как показано на рисунке:

Дизайн сайта-портфолио 2


4. Используя Ellipse Tool (U ), нарисуйте круг снизу меню:

Дизайн сайта-портфолио 2

Установите следующие параметры слоя:

Fill 0%

Blending Options>Gradient Overlay:

Дизайн сайта-портфолио 2

Параметры градиента:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2

5. Используя Ellipse Tool (U), нарисуйте маленький круг снизу сайта:

Дизайн сайта-портфолио 2

Установите следующие параметры слоя

Blending Options>Drop Shadow:

Дизайн сайта-портфолио 2

Blending Options>Inner Glow:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2

6. Используя Ellipse Tool (U), нарисуйте еще один круг, как показано на рисунке:

Дизайн сайта-портфолио 2

Установите параметры слоя с кружком:

Blending Options>Gradient Overlay:

Дизайн сайта-портфолио 2

Параметры градиента:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2

7. Сделайте несколько копий слоев с кругом, трансформируйте (CTRL+T) и разместите как показано на рисунке:

Дизайн сайта-портфолио 2


8. Нарисуйте еще три круга для того, чтобы отделить участок сайта:

Дизайн сайта-портфолио 2

Все три слоя должны иметь одинаковые параметры:

Цвет: #FF627A

Blending Options>Drop Shadow:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2


9. Нарисуйте еще один маленький круг:

Дизайн сайта-портфолио 2

Установки слоя с кругом:

Blending Options>Drop Shadow:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2


10. Теперь подпишите названия пунктов меню сайта, применяя свободную трансформацию (CTRL+T) слоев с текстом. Установки для текста представлены ниже:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2


11. Добавьте название сайта. Параметры текста для названия:

WEBSITE:

Дизайн сайта-портфолио 2

NAME:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2

Установите следующие параметры слоя с названием сайта:

Blending Options>Stroke:

Дизайн сайта-портфолио 2


12. Добавьте названия подразделов сайта.

Параметры текста:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2

Установите следующие параметры слоев с названиями подразделов:

Blending Options>Gradient Overlay:

Дизайн сайта-портфолио 2

Параметры градиента:

Дизайн сайта-портфолио 2


Blending Options>Stroke:

Дизайн сайта-портфолио 2


13. Используя Pencil Tool, белым цветом нарисуйте иконку на кнопке:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2


14. Пронумеруйте подразделы сайта. Используйте шрифт с параметрами:

Дизайн сайта-портфолио 2


Дизайн сайта-портфолио 2


15. Заполните подразделы текстом с параметрами:

Текст оранжевого цвета:

Дизайн сайта-портфолио 2

Основной текст:

Дизайн сайта-портфолио 2


Утолщенный текст:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2


Найдите в интернете логотипы и разместите их в подразделе сайта:

Дизайн сайта-портфолио 2

Дизайн сайта-портфолио 2


16. Используя Ellipse Tool (U), нарисуйте окно для представления скриншота сайта:

Дизайн сайта-портфолио 2

Установите следующие параметры слоя:

Blending Options>Drop Shadow:

Дизайн сайта-портфолио 2

Blending Options>Stroke:

Дизайн сайта-портфолио 2


Сделайте 3 копии слоя с кругом и разместите их как показано на рисунке:

Дизайн сайта-портфолио 2

Часть 2.
17. Найдите 3 скриншота, которые будут размещены в окнах (ALT+click между слоем с окном и слоем со скриншотом)

Дизайн сайта-портфолио 2


Дизайн сайта-портфолио 2


Повторите то же самое для других окон:

Дизайн сайта-портфолио 2

18. Используя Ellipse Tool (U), создайте кнопку-скроллинг для переключения скриншотов. Цвет #FD9B00.

Дизайн сайта-портфолио 2

Параметры слоя:

Blending Options>Drop Shadow:

Дизайн сайта-портфолио 2


Blending Options>Stroke:

Дизайн сайта-портфолио 2


Создайте новый слой. Используя Pencil Tool, нарисуйте на кнопке белый указатель.

Дизайн сайта-портфолио 2


Дизайн сайта-портфолио 2


19. Объедините в группу слои, которые образуют кнопку-указатель. Скопируйте группу, примените свободное преобразование (CTRL-T) и поместите ее с другой стороны скриншотов.

Окончательный результат:

Дизайн сайта-портфолио 2




Автор: Adobe Software
Перевод: Nastia

***


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[23.10.2010][rastER KLipardy]
Косметика в HQ (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[16.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Retouch Man (2015) (0)
[03.12.2014][Photoshop Actions]
50 Photoshop Action Scripts (0)
[12.02.2015][DesiGN SofT]
Room Arranger 7.5.0.421 (2014) Rus/Eng (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки photoshop Выборочная коррекция (2014) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[12.02.2015][video futage]
Deep Eyes | 7 in 1 logo pack - Project for After Effects (Videohive) (0)
[21.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Art Wedding (0)
[12.02.2015][DesiGN SofT]
PT Photo Editor 1.7.1 Standard Edition Rus Portable by SamDel (0)
[12.02.2015][video futage]
Quicky Logo - Project for After Effects (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[12.02.2015][DesiGN SofT]
Photomizer Retro 2.0.14.106 Portable by Valx (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеокурс удаление объектов в фотошопе (0)
[04.12.2015][Lessons PHOTOSHOP]
Tuts+ Premium - Creative Photo Effects in Adobe Photoshop (2015) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс по съемке и обработке цифровых фотографий (2015) (0)
 

Прикрепления:
Категория: Lessons PHOTOSHOP | Просмотров: 1114 | Добавил: supermen | Теги: Photoshop, ansys 2 stroke, дизайн сайта портфолио, как красить яйца портфолио, сайт дизайн, дизайн сайта, портфолио
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск






[19.09.2011][Veb DeSiGn]
Шаблон флеш сайта #27151 (0)
[27.09.2011][PSD-files, исходники]
Шаблон поисковой панели PSD991 (1)
[29.05.2010][Lessons PHOTOSHOP]
Эффект прожектора (2)
[12.02.2015][DesiGN SofT]
PT Photo Editor 1.7.1 Standard Edition Rus Portable by SamDel (0)
[02.10.2010][Lessons PHOTOSHOP]
Дымящийся текст за 10 простеньких шагов (6)
[27.11.2013][3D MAX modeling]
Mini Cooper Countryman 3D модель 3D max \ Vray (0)
[01.09.2013][vectOR KLipardy]
Stock: Vector modern abstract background (0)
[16.09.2011][DesiGn bLOg]
25 способов преодолеть творческий ступор (8)
[12.03.2013][Lessons PHOTOSHOP]
Светящийся Водный Текст с Брызгами \ Create a Glowing Liquid Text with Water Splash Effect in Photoshop (0)
[24.10.2010][icons]
Toon Xp ICONS (75 шт. PNG) (1)

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования
Rambler's Top100




[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[11.06.2010][Lessons PHOTOSHOP]
Трехмерная надпись (8)
[17.06.2010][Lessons PHOTOSHOP]
Текст охваченный огнём, Stunning Text on Wild Fire Effect (6)
[03.12.2015][DesiGN SofT]
Sentaurus TCAD 2012 SP2 G-2012.06 SP2 на VMWare (1)
[29.05.2010][Lessons PHOTOSHOP]
Ночной город, спецэффект (2)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)
[12.02.2015][video futage]
Dark Circles Logo Reveal - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки фотошоп Композиция Шубека (0)
[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[24.01.2013][vectOR KLipardy]
Black Vintage Cards Vector 2 (0)
[01.09.2013][vectOR KLipardy]
Stock: Website Template (0)
[29.05.2010][Lessons PHOTOSHOP]
судорга (абстракционная фантазия) (4)
[13.12.2015][Lessons PHOTOSHOP]
Вырезание объемных предметов в фотошоп (2015) (1)
[29.05.2010][rastER KLipardy]
Stock Photo: Drops, Splashes (1)
[29.05.2010][Lessons PHOTOSHOP]
Металлические трубки и провода (2)
[10.09.2011][Veb DeSiGn]
Template Monster – 11925 – Flash Template (0)
[30.12.2012][DesiGn bLOg]
Кофейные фантазии by Tomoko Shintani (0)
[09.11.2010][Styles Photoshop]
Более 150-ти стилей WEB 2.0 (1)



Среда
24.04.2024
05:51


Copyright artpost and semantic product zanchi 2010-2011 © 2024