Сейчас самое время объединить все слои. Для этого просто нажмите 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 | Интересный блог на компьютерную тему
Комментариев нет:
Отправить комментарий