Строение
Дизайн сайта в стиле Windows Vista
Тема в разделе "Веб-Дизайн", создана пользователем samg, 14 сен 2009.
  1. samg

    samg Новичок

    Сообщения:
    5.822
    Симпатии:
    26
    Баллы:
    0
    Дизайн сайта в стиле Windows Vista

    Всем привет!!! :)))

    Сегодня Вы научитесь делать дизайн для сайта в стиле Windows Vista.

    ШАГ 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 .
    Вот и всё. Надеюсь, что не отнял у Вас много времени.




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

    dmkamaev Новичок

    Сообщения:
    204
    Симпатии:
    9
    Баллы:
    0
    Ответ: Дизайн сайта в стиле Windows Vista

    Неплохо так то) цветовая гамма синий-желтый(желто-зеленый) сочетаема. выглядит красиво :ay:
    _______
    на демиарт в 07 году еще была эта статья)
     
  3. DarkAngel

    DarkAngel Новичок

    Сообщения:
    2.908
    Симпатии:
    45
    Баллы:
    0
    Ответ: Дизайн сайта в стиле Windows Vista

    Статья отличная, мой друг сделал что-то похожее на своём сайте. И я скажу,что выглядит это очень даже неплохо. Советую сделать такой сайт тем, у кого сайт о версиях windows vista. Мне кажется выйдет очень неплохо.=)
     
  4. Светозар

    Светозар Генерал

    Сообщения:
    2.524
    Симпатии:
    215
    Баллы:
    63
    Ответ: Дизайн сайта в стиле Windows Vista

    ДА... я это уже раз 200 видел. А можно поподробнее, и желательно, чтобы фотожлоб был версии CS4 RUS. Спасибо.
    Расскажите:
    1) Как его нарезать?
    2) Как из него сделать резину?
    Это два вопросы волнующих любого новичка!!!
     
  5. kalashnikov74

    kalashnikov74 Новичок

    Сообщения:
    486
    Симпатии:
    13
    Баллы:
    0
    Ответ: Дизайн сайта в стиле Windows Vista

    samg, Спасибо за статью)) Пригодиться))
    [MOD="Maristrazza"]Хватить флудить![/MOD]
     
    Последнее редактирование модератором: 23 июн 2010
  6. Drakon4ik_xXx

    Drakon4ik_xXx Новичок

    Сообщения:
    20
    Симпатии:
    0
    Баллы:
    0
    Ответ: Дизайн сайта в стиле Windows Vista

    да, делала подобное, очень свежо и красиво! Нечего лишнего! Выглядит достойно! :ab:
    Есть очень много похожих уроков этого типа, но всеравно спосибо)
     
  7. yoojin

    yoojin Новичок

    Сообщения:
    185
    Симпатии:
    0
    Баллы:
    0
    Ответ: Дизайн сайта в стиле Windows Vista

    Абсолютно ничего интересного не вижу.
     
  8. Nikkoo

    Nikkoo Новичок

    Сообщения:
    1
    Симпатии:
    0
    Баллы:
    0
    Ответ: Дизайн сайта в стиле Windows Vista

    Соглашусь с yoojin'ом, получается довольно обычный дизайн, нет своей изюминки...
     
  9. Светозар

    Светозар Генерал

    Сообщения:
    2.524
    Симпатии:
    215
    Баллы:
    63
    Ответ: Дизайн сайта в стиле Windows Vista

    Nikkoo, в данном уроке представлен шаблон, который уже 100500 лет сверстанный, с исходниками лежит в сети! Урок создан с целью оттачивая мастерства... Если вам не нравится шаблон, можете переделать его под свои нужды, дабы последовательность создания макета указаны в посте ТС!
     
Показать ещё