Ссылка на нас

Вам нравится наш сайт?
Разместите ссылку на нас:


Наш RSS канал

Наш опрос

Ваш возраст?
до 10 лет
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
больше 40

Связь с Нами


Главный администратор:
Alexandr


Связь с администратором:
Написать письмо


ICQ администратора:
6998040



Главный модератор:
Natali


Связь с модератором:
Написать письмо



Фотоэффекты прям в Онлайн за 5 секунд!

У Вас есть сайт? Отличная Партнёрская программа для Вас!
авг08

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

Опубликовал: Alexandr в 02:23
Раздел: Статьи / Уроки
Автор: HV-DESIGNS
Перевод: Selestial

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

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


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

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


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

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


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


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


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


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

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


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

Дизайн сайта в стиле 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


Внимание! У вас нет прав для просмотра скрытого текста.
Ключевые теги:
0
 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
загрузка...

!!!!!!!!

Очень полезное!

Опубликовал: Alexandr в раздел: Полезное
 
 

Группа:
Гости

Интеллект:
0

тоже долго не мог убрать скругленые углы..но всетаки зделал..терпение и труд все перетркт laughing
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

спасибо
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

Читать лень??? Зря Вы так думаете, у меня тоже не получилось избавится от нижних скругленных краев.... Нажимаю клавишу M удерживаю Alt, выделяется нужный кусок, но выделенное не становится ПРЯМОУГОЛЬНЫМ....
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

мне пригодиться
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

это точно, не понятно, как делать прямые углы! (((
объяснять надо хорошо!!!
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

у меня просто не получается в самом начале избавить от нижних скруглённых углов:
Публикаций: 0 | Комментариев: 0    
 

Группа:
Главный Администратор

Интеллект:
0

rwfb, Вам просто читать лень! Урок разжован как только можно!
Публикаций: 509 | Комментариев: 771    
 

Группа:
Гости

Интеллект:
0

чето у меня не получается(
че делать можете видео урок этой статьи выложить?
Публикаций: 0 | Комментариев: 0    
 

Группа:
Главный Администратор

Интеллект:
0

rwfb, естественно для Фотошоп!
Публикаций: 509 | Комментариев: 771    
 

Группа:
Гости

Интеллект:
0

а через какую прогу это делать
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

прикольно, обязательно воспользуюсь данным приёмчиком
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

После работы в Висте, как-то не очень хочется делать что-то подобное с сайтом, а вдруг и сайт заглючит также как операционка. smile Но за принципы работы СПС, пригодится....
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

класс-то класс, но сколько такая страничька будет грузится с модемом - страшно подумать...
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

очень хорошая статья
Публикаций: 0 | Комментариев: 0    
 

Группа:
Гости

Интеллект:
0

Круто! Большое спасибо winked
Публикаций: 0 | Комментариев: 0    
 

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
загрузка...