Jump to content
Sign in to follow this  
Apocalisso

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

Recommended Posts

Всем приветик!!!

 

ШАГ 1.

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

 

post-28774-1180298189.gif

 

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

 

post-28774-1180298191.gif

 

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

 

post-28774-1180298193.gif

 

post-28774-1180298190.gif

 

post-28774-1180298192.gif

 

ШАГ 2.

 

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

 

 

post-28774-1180298194.jpg

 

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

 

post-28774-1180298425.jpg

 

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

 

post-28774-1180298427.jpg

 

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

 

post-28774-1180298429.gif

 

ШАГ 3.

 

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

 

post-28774-1180298426.jpg

 

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

 

post-28774-1180298428.jpg

 

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

 

post-28774-1180298430.jpg

 

ШАГ 4.

 

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

 

post-28774-1180298484.gif

 

post-28774-1180298487.gif

 

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

 

post-28774-1180298489.gif

 

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

 

post-28774-1180298485.jpg

 

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

Сейчас берём Elliptical marquee tool . Создайте новый слой выше слоя с кнопками.

 

post-28774-1180298488.gif

 

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

 

post-28774-1180298490.jpg

 

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

 

post-28774-1180298718.jpg

 

ШАГ 5.

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

 

post-28774-1180298720.gif

 

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

Далее выберите Rectangular marquee tool , на новом слое (поместите его под колонтитулы) сделайте выделение, соединяющее колонтитулы, залейте его белым цветом. К слою применяем:

 

post-28774-1180298722.gif

 

post-28774-1180298719.gif

 

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

 

post-28774-1180298721.gif

 

Размножьте окна в нужном количестве.

В заключении окна и фон можно размыть с помощью Filter > blur > guassian blur .

Вот и всё. Надеюсь, что не отнял у Вас много времени.

 

post-28774-1180298723.jpg

 

Автор: HV-DESIGNS

Перевод: Selestial

Share this post


Link to post
Share on other sites

Вот с чего начинается дизайн....из самой малости получается всё....пасиба за тему...

Share this post


Link to post
Share on other sites

Уау!!! Классная статья!!!! Моного полезного из неё узнал!! Спасибо!!!))

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use