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


Главная » 2011 » Январь » 12 » Дизайн сайта в стиле Windows Vista
13:46
Дизайн сайта в стиле Windows Vista

Дизайн сайта в стиле Windows Vista

Дизайн сайта в стиле Windows Vista \ Web site design in the style of Windows Vista


Всем приветик!!! smile.gif

ШАГ 1.
Создайте новый документ 900x800 , залейте фон цветом #cccccc , создайте новый слой под названием "заголовок". Далее рисуем сверху прямоугольник со скруглёнными краями (U ):

Дизайн сайта в стиле Windows Vista.

После того, как Вы закончили рисовать прямоугольник, нажмите на него правой кнопкой мышки и выберите «Образовать выделенную область …». С помощью Прямоугольного выделения (М ), зажав ALT , избавьтесь от нижних скруглённых углов:

Дизайн сайта в стиле Windows Vista.

Ваша форма должна иметь квадратные углы внизу и закругленные углы в верхней части. Если всё в порядке залейте выделение белым цветом. Далее двойной щелчок по слою "заголовок", и выставляем следующие настройки:

------------------------------------------------------------------------------------------
.DESIGNPLASTIC.RU - дизайн проект в Самаре.
-----------------------------------------------------------------------------------------


Дизайн сайта в стиле Windows Vista.

Дизайн сайта в стиле Windows Vista.

Дизайн сайта в стиле Windows Vista.

ШАГ 2.
Теперь нужно добавить логотип сайта:

Дизайн сайта в стиле Windows Vista.

(В создании логотипа Вам могут помочь следующие ссылки reflection и orb ,правда они на английском языке, но я думаю, что на Demiart`e эти уроки есть). В настоящее время «сайт» должен выглядеть вот так:

Дизайн сайта в стиле Windows Vista.

Ну а теперь нам потребуется Vista фон (трава). Если у Вас нет подходящего изображения, то возьмите это Vistagrass Вставляем траву под слой с заголовком. Жмём Ctrl+T, чтобы трансформировать изображение. Изменяйте размеры до тех пор, пока не будет похоже на это: (необходимо оставить немного места снизу)

Дизайн сайта в стиле Windows Vista.

Не забудьте применить к слою следующие параметры:

Дизайн сайта в стиле Windows Vista.

ШАГ 3.
Дублируем слой "заголовок". Дубль переименуем в "колонтитул". Идём в Edit > transform > flip vertical , нажимаем Ctrl+T , изменяем размер примерно наполовину и переносим колонтитул вниз:

Дизайн сайта в стиле Windows Vista.

Можно сделать отражение нижнего колонтитула (об этом можно узнать в ссылке, которую я дал выше), а также написать необходимую Вам информацию:

Дизайн сайта в стиле Windows Vista.

После преобразований должно получиться следующее:

Дизайн сайта в стиле Windows Vista.

ШАГ 4.
Далее рисуем кнопку. На новом слое рисуем небольшой прямоугольник со скруглёнными краями(U ). Создаём выделение, заливаем его белым цветом. Добавляем следующие настройки слоя:

Дизайн сайта в стиле Windows Vista.

Дизайн сайта в стиле Windows Vista.

Ваша кнопка должна выглядеть следующим образом:

Дизайн сайта в стиле Windows Vista.

Установите непрозрачность кнопки 70%, дублируйте слой столько раз, сколько необходимо, и расставляйте дубли под Ваш заголовок:

Дизайн сайта в стиле Windows Vista.

Дальше необходимо скрыть все слои, за исключением слоёв с кнопками, и объединить все видимые в один слой. Теперь все кнопки должны находиться на одном слое.
Сейчас берём Elliptical marquee tool . Создайте новый слой выше слоя с кнопками.

Дизайн сайта в стиле Windows Vista.

Делаем выделение так, как показано на рисунке, заливаем его белым цветом:

Дизайн сайта в стиле Windows Vista.

Далее Ctrl+клик по слою с кнопками (загрузится выделение). Применяем Select > inverse (Shift+Ctrl+I ), жмём Delete (удаляем лишнее). Установите непрозрачность слоя на 30%:

Дизайн сайта в стиле Windows Vista.

ШАГ 5.
Создайте две формы, похожие на Ваши верхний и нижний колонтитулы (они были сделаны по такому же принципу, только в меньших масштабах).

Дизайн сайта в стиле Windows Vista.

Не смущайтесь, если увидите голубую полоску на верхнем колонтитуле. Принцип её создания такой же, как и в 4 шаге, только вместо Elliptical marquee tool , используется Rectangular marquee tool .
Далее выберите Rectangular marquee tool , на новом слое (поместите его под колонтитулы) сделайте выделение, соединяющее колонтитулы, залейте его белым цветом. К слою применяем:

Дизайн сайта в стиле Windows Vista.

Дизайн сайта в стиле Windows Vista.

Установите непрозрачность до 60%:

Дизайн сайта в стиле Windows Vista.

Размножьте окна в нужном количестве.
В заключении окна и фон можно размыть с помощью Filter > blur > guassian blur .
Вот и всё. Надеюсь, что не отнял у Вас много времени.

Дизайн сайта в стиле Windows Vista.



Автор: HV-DESIGNS
Перевод: Selestial

***


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[12.02.2015][vectOR KLipardy]
Цветные абстрактные фоны в векторе 9 (0)
[23.10.2010][rastER KLipardy]
Косметика в HQ (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[12.02.2015][video futage]
Quicky Logo - Project for After Effects (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[13.02.2015][Plugins Photoshop]
AKVIS AirBrush 2.5.300.11214 (x86/x64) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Портретная ретушь интенсив (2014) (0)
[12.02.2015][video futage]
Deep Eyes | 7 in 1 logo pack - Project for After Effects (Videohive) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс по съемке и обработке цифровых фотографий (2015) (0)
[12.02.2015][video futage]
Awards Pack II - Project for After Effects (Videohive) (0)
[12.02.2015][DesiGN SofT]
GraphiSoft ArchiCAD 18 Build 4020 (x64) + Add-Ons (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[12.02.2015][DesiGN SofT]
ACDSee Pro 7.1 Build 165 RePack 2014 (RU/EN) (0)
[25.10.2015][PSD-files, исходники]
Rons Deviney 18 Designs PSD (0)
[22.10.2015][Lessons PHOTOSHOP]
Создание поверхности воды в photoshop (2015) (0)
[12.02.2015][rastER KLipardy]
Фото младенцев \ Newborns, 25 x JPG (0)
[12.02.2015][DesiGN SofT]
Photomizer Retro 2.0.14.106 Portable by Valx (0)
 

Прикрепления:
Категория: Lessons PHOTOSHOP | Просмотров: 3352 | Добавил: supermen | Теги: сайт в стиле виста, сайт в стиле vista, уроки по windows vista, темы в стиле windows vista, сайт в стиле wind, дизайн сайта в photoshop, Vista Стиль м
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск






[17.09.2011][vectOR KLipardy]
Blue light vector background (0)
[11.01.2011][Veb DeSiGn]
Free WordPress Theme Jestalil (0)
[18.09.2011][DesiGn bLOg]
Ошибки фрилансера (0)
[22.09.2011][PSD-files, исходники]
Kung fu Panda PSD - Кунг-фу Панда PSD (0)
[12.03.2013][Lessons PHOTOSHOP]
Стальной текст \ Create a Steel Text Effect in Photoshop (0)
[18.09.2011][DesiGn bLOg]
Как правильно работать с дизайнером. (0)
[19.09.2011][Lessons Adobe Illustrator]
Рисуем лампочку (0)
[12.02.2015][DesiGN SofT]
TechSmith Snagit 12.2.1 Build 1968 Final (2014/RUS/ENG) (0)
[15.05.2012][Lessons PHOTOSHOP]
Рисуем портрет Рианны (0)
[13.04.2011][rastER KLipardy]
Stock Vector: Seamless vintage floral pattern | Бесшовный винтажный цветочный паттерн (0)

Статистика


Онлайн всего: 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)



Вторник
03.12.2024
20:27


Copyright artpost and semantic product zanchi 2010-2011 © 2024