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


Главная » 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)
[02.04.2019][Lessons PHOTOSHOP]
Создаём сырный текст в Adobe Photoshop (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[13.02.2015][Plugins Photoshop]
AKVIS AirBrush 2.5.300.11214 (x86/x64) (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[22.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Beauty (0)
[22.10.2015][Lessons PHOTOSHOP]
Мастер-класс photoshop Oil Retouch (0)
[18.11.2015][Brushes Photoshop]
Rons Deviney Cyborg Circuitry 75 Brushes (0)
[12.02.2015][video futage]
Awards Pack II - Project for After Effects (Videohive) (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[19.11.2015][Lessons PHOTOSHOP]
Повышение практики мастерства в фотошоп (2015) (0)
[19.11.2015][Lessons PHOTOSHOP]
Ретушь и цветокоррекция от Гавра (2015) (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Womans Retouch (2015) (0)
[12.02.2015][vectOR KLipardy]
Цветные абстрактные фоны в векторе 9 (0)
[04.12.2015][Lessons PHOTOSHOP]
Tuts+ Premium - Creative Photo Effects in Adobe Photoshop (2015) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс по съемке и обработке цифровых фотографий (2015) (0)
[12.02.2015][rastER KLipardy]
Фото младенцев \ Newborns, 25 x JPG (0)
 

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


Поиск






[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[15.12.2010][Plugins Photoshop]
Nik Software Silver Efex Pro v1.007 for Adobe Photoshop (0)
[29.09.2011][Brushes Photoshop]
Кисти - Следы от кофе с завитушками (+ исходники) / Fancy Coffee Rings Brushes + Image Pack (0)
[23.01.2011][icons]
Medical Icons (0)
[08.03.2013][Veb DeSiGn]
Множество примочек для системы UCOZ \ Vol5 (0)
[27.11.2013][3D MAX modeling]
DOSCH DESIGN - 3D: Студия Среды (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[14.01.2011][vectOR KLipardy]
Abstract Backgrounds (0)
[18.07.2013][DesiGn bLOg]
Мифы и легенды брендов. Красивые сказки, в которые мы хотим верить (0)
[13.09.2010][Lessons PHOTOSHOP]
Гранжевое фото, обработка фото (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)



Пятница
30.10.2020
19:14


Copyright artpost and semantic product zanchi 2010-2011 © 2020