| Главная | Новинки | Статистика | Реклама на сайте |

Навигация по сайту
На главную
О нас и Правила!
Акции
Частые Вопросы!
Редактор.0lik.ru!
Photoshop:
Градиенты (Gradients)
Заливки (Patterns)
Кисти (Brushes)
Макросы (Actions)
Стили (Styles)
Текстуры (Textures)
Формы (Shapes)
Шаблоны Photoshop
Дизайн и графика:
3D Модели
Аватары (Avatars)
Бумажные модели
Видео Статьи
Картинки (Pictures)
КлипАрты (ClipArts)
Наши фотографии
Статьи / Уроки
Хорошие программки
Шрифты (Fonts)
Web-Дизайн:
Шаблоны для сайтов
Видеомонтаж
Футажи
Украшения Windows
Иконки / Курсоры
Обои  |  Weni.Ru
Скринсейверы
Темы / Скины
Разное
Видео
Звуки
Интересное
Флэш игры
Юмор
  
Игры на сайте!
 
ФОРУМ
Поиск по сайту
Для пользователей
Логин
Пароль
 
Ссылка на нас
Вам нравится наш сайт?
Разместите ссылку на нас:

***
Или разместите кнопочку:




Нас знают многие
Locations of visitors to this page
Интересное в сети!
.
Наш сайт обновляется каждый день!
Не забудьте и заходите почаще!

Уважаемые Авторы!
Если Вы обнаружили на Нашем сайте свою работу, размещенную каким-то пользователем
Без Вашего разрешения, просьба связаться с Администрацией сайта.
Это касается именно Авторских работ, а не материала собранного в Интернете и размещенного где-то.
 [ Статьи / УрокиДизайн сайта в стиле Windows Vista
Автор: 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




Внимание! У вас нет прав для просмотра скрытого текста.
 
Уважаемый посетитель вы вошли на сайт как незарегистрированный пользователь.
Чтобы увидеть ссылки на скачку вам необходимо зарегистрироваться!

Регистрация
  • 68
 (голосов: 9)
  
   Смотрели: 6555 раз | Автор: Alexandr | Дата: 8 августа 2007 | Распечатать
 [ Рекомендуем ] 
 
Загрузка блока...
 
  похоже новости 
  • Урок: Рисуем пингвина!!!
  • Рисуем Кристальное яблоко
  • 3D Smiley, спецэффект
  • Цветочный текст, текстовый спецэффект
  • Рисуем бокал


  • Добавить эту новость в закладки браузера!

    Прямая ссылка на эту страницу:

    Опубликовать где либо (в HTML-коде):

    Опубликовать на форуме (в bb-коде):
    1. mrmaxpayne Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    Круто! Большое спасибо winked
    Дата коментария: 8 августа 2007 13:10

    2. Knyazhe Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    очень хорошая статья
    Дата коментария: 9 августа 2007 13:25

    3. Вася Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    класс-то класс, но сколько такая страничька будет грузится с модемом - страшно подумать...
    Дата коментария: 14 сентября 2007 23:45

    4. _shuric_ Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    После работы в Висте, как-то не очень хочется делать что-то подобное с сайтом, а вдруг и сайт заглючит также как операционка. smile Но за принципы работы СПС, пригодится....
    Дата коментария: 21 сентября 2007 08:51

    5. Energetik Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    прикольно, обязательно воспользуюсь данным приёмчиком
    Дата коментария: 27 ноября 2007 22:53

    6. rwfb Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    а через какую прогу это делать
    Дата коментария: 8 января 2008 17:26

    7. Alexandr Зарегистрирован: 27.04.2007 | ICQ: 6998040 |
    Рейтинг
    Коментариев: 772 Коментов
    Новостей: 498
    rwfb, естественно для Фотошоп!
    Дата коментария: 8 января 2008 17:59

    8. rwfb Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    чето у меня не получается(
    че делать можете видео урок этой статьи выложить?
    Дата коментария: 8 января 2008 21:58

    9. Alexandr Зарегистрирован: 27.04.2007 | ICQ: 6998040 |
    Рейтинг
    Коментариев: 772 Коментов
    Новостей: 498
    rwfb, Вам просто читать лень! Урок разжован как только можно!
    Дата коментария: 9 января 2008 12:14

    10. rwfb Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    у меня просто не получается в самом начале избавить от нижних скруглённых углов:
    Дата коментария: 9 января 2008 13:04

    11. dima_zaicev Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    это точно, не понятно, как делать прямые углы! (((
    объяснять надо хорошо!!!
    Дата коментария: 25 февраля 2008 10:07

    12. RONNIj Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    мне пригодиться
    Дата коментария: 22 апреля 2008 12:27

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

    14. emercom2006 Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    спасибо
    Дата коментария: 30 ноября 2008 21:26

    15. vasava-net Зарегистрирован: -- | ICQ: -- |
    Рейтинг
    Коментариев: - Коментов
    Новостей: 0
    тоже долго не мог убрать скругленые углы..но всетаки зделал..терпение и труд все перетркт laughing
    Дата коментария: 7 сентября 2009 05:23

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

    Все материалы на данном сайте предназначены только для ознакомительных целей и БЕЗ коммерческого использования! Все права на публикуемые графические и текстовые материалы принадлежат их владельцам. Администрация сайта не несет ответственности за их использование! Также администрация сайта не несёт ответсвенности за материалы, размещённые на этом ресурсе. Если Вы считаете, что какой-либо из материалов нарушает Ваши права, свяжитесь с Администрацией.

    Поиск по сайту
    Популярное
    » Фоторамки - Новогодние свечи
    » Фоторамки - Цветочные
    » Валентинка
    » Рамка для фото " Морское дно"
    » Рамка для фото "Желтые цветы"
    » Фоторамки - Сердце
    » Новогодний мишутка
    » Новогодняя рамочка с фужерами
    » Клипарт - Вырезы для рамок - Оригинальные
    » Рамка для фото портретная
    » Романтические вырезы для рамок.
    » Уголки для украшения рамок
    » Трогательные работы Katanimate
    » Шаблон для фотомонтажа - Девочка5
    » Тигры, львы, рыси
    Реклама на сайте
    Статистика по сайту!
    Новостей
    опубликовано:

    Сегодня: 67
    Вчера: 119
    Позавчера: 139
    Календарь
    «    Август 2007    »
    ПнВтСрЧтПтСбВс
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     
    Опросник

    Да
    Нет

    Забавное!
    Информация по сайту
    Как вставить спецсимвол?
    Как вставить спецсимвол?

    Как использовать Кисти?
    Как использовать Кисти?

    Как использовать Actions?
    Как использовать Actions?

    Как залить картинку?
    Как залить картинку?


    Как скачать с Rapidshare?
    Как скачать с Depositfiles
    Как скачать с Fileget.Ru?

    Друзья и партнёры

     -»  Обои на рабочий стол!
     -»  Поиск тура, отеля!
     -»  Фото-блог александра!  
    Администрация

     Админ сайта:  Alexandr
     E-Mail: Связь с Админом
     ICQ: 6998040
    Топ сайтов
    Топ временно
    отключен!
    Счётчики

    Rambler's Top100
    Rambler's Top100
    Интересное в сети!

    Информация в данном столбце никак не связана с нашим сайтом. Всё что вы видите здесь находится за пределами нашего сайта.

    ИНФОРМАЦИЯ И КАРТИНКИ ПРЕДСТАВЛЕННЫЕ НИЖЕ, НИКАК НЕ СВЯЗАНЫ С НАШИМ САЙТОМ
    .

    Администрация сайта не несет ответственности за материалы размещенные пользователями!

    Регламент проекта (Disclaimer)   |    Copyright © 2007-2010 0lik.ru   |