Перейти к содержанию

Добро пожаловать в сообщество творческих людей - ARTTalk.ru!

Уважаемые пользователи, если вы были зарегистрированы ранее, вам необходимо пройти процедуру восстановления пароля с помощью адреса электронной почты.

Для новых пользователей доступна регистрация.

Тема для обсуждения новой версии сообщества.

Если возникают какие либо проблемы с восстановлением старого аккаунта, вы можете воспользоваться формой обратной связи.

Авторизация  
Apocalisso

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

Рекомендуемые сообщения

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

 

ШАГ 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

Авторизация  

×

Важная информация

Мы разместили cookie-файлы на ваше устройство, чтобы помочь сделать этот сайт лучше. Вы можете изменить свои настройки cookie-файлов, или продолжить без изменения настроек. Условия использования