четверг, 21 февраля 2013 г.

окна как в windows 7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Окно Windows 7 для Вашего сайта. Часть 1 | CompHobby | Интересный блог на компьютерную тему

Комментариев нет:

Отправить комментарий