-Рубрики

 -Всегда под рукой

 -Я - фотограф

 -Поиск по дневнику

Поиск сообщений в gaki1818

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 09.10.2009
Записей: 7667
Комментариев: 7813
Написано: 19699


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

Четверг, 07 Января 2010 г. 18:23 + в цитатник


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

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




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




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













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




В настоящее время «сайт» должен выглядеть вот так:




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




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




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




Можно сделать отражение нижнего колонтитула, а также написать необходимую Вам информацию:




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



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







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



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




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




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




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




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




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







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




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


Рубрики:  уроки


Процитировано 11 раз

я-оля-леля   обратиться по имени Четверг, 07 Января 2010 г. 18:32 (ссылка)
спасибо!
Ответить С цитатой В цитатник
DiZa-74   обратиться по имени Четверг, 07 Января 2010 г. 19:01 (ссылка)
Ответить С цитатой В цитатник
Rumata_Estorski   обратиться по имени Четверг, 07 Января 2010 г. 20:30 (ссылка)
интересно, хотя уже и висту под 7 сменил)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 07 Января 2010 г. 21:57ссылка
Rumata_Estorski, Ну это же просто урок в стиле виста, а применять этот эффект можно, я думаю, везде!
 (450x334, 250Kb)
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку