Окно Windows 7 для Вашего сайта. Часть 1
web-дизайн

Привет, друзья. Сегодня на блоге открывается новая рубрика «веб-дизайн». Этот мануал будет интересен всем кому нравится оформление Windows 7.

(осторожно, много картинок)

Я расскажу как создать вот такое окно, в которое можно вписать ваш контент, с помощью html и css:

Достоинством такого окошка будет не только его красота но и то, что оно сможет растягиваться не только по вертикали, но и по горизонтали. Приступим.

Откройте Photoshop, создайте белый лист с разрешением своего экрана, переместите на него небольшое окно Windows и сделайте скрин-шот (кнопка Prit Scr на клавиатуре). После этого вставьте полученное изображение в новый документ Photoshop:

Удалите слой Background. Используя инструмент Crop Tool обрежем всё ненужное, оставив только окно и тень:

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

Нажмите комбинацию клавиш Ctrl+J, чтобы переместить выделение на новый слой и переместите этот слой над кнопками «Назад» и «Вперёд», при перемещении удерживайте Shift, чтобы двигать слой только по прямой линии, в итоге получим следующее:

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

После этого выделите всю середину слоя вот так:

Нажмите Ctrl+T и растяните выделение до верхней внутренней рамки, которую мы создали ранее, вот так:

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

Создайте прямоугольное выделение по краям окна, захватив черную кромку в один пиксель и обрезав тень:

После чего нужно закруглить края выделения, перейдите в меню Select->Modify->Smooth выставьте значение 5 и нажмите ОК. В результате мы выделили окно. Теперь нажмите Ctrl+Shift+I, чтобы инвертировать выделение и нажмите Delete. Получили вот что:

Сейчас самое время объединить все слои. Для этого просто нажмите Layer->Merge Visible. Теперь у нас всего один слой, переименуйте его в window, нажмите на нём правой кнопкой мыши и выберите Blending Options. Нажмите на Outer Glow и выставьте параметры тени как на картинке:

Нажмите ОК. Теперь у нас есть тень с прозрачным фоном.

Далее нам нужно разбить это окно на несколько изображений. Объяснять тут особо нечего, нужно просто получить набор из таких частей, только не забывайте, что вырезать части нужно без белого фона и сохранять их в формате PNG:

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

Интересуетесь программированием микроконтроллеров AVR? Тогда обязательно посетите сайт ChipEnable.Ru. Здесь вы найдете учебный курс по программированию микроконтроллеров AVR на Си, библиотеки для IAR, WinAVR и CodeVision, статьи по программированию встраиваемых систем, а также описание различных устройств на микроконтроллерах AVR

  • http://twitter.com/vadimmts Вадим Кицелюк

    подключил jquery -всё окей..
    правда у меня окно от другой системы=)
    но, всё же..
    http://mradio.in