Photoshop - пример за рязане на капачка на оформлението на сайта

Изправени пред трудността на това как да се изрежат капачките на лого за оформление.

Проблемът беше, че един слой се наслагва върху другия. Решението е намерено с помощта на онлайн htmlbook. Така че, не е фрагмент от капачката. От това, което искате да се намали бъдещата лого, което трябва да бъде на файл с прозрачен фон, символ на знамето и думите "Формула":

Изберете инструмент "движение", проверете дали панелът се проверява "Auto:. Layer групи" Алтернативно, ние кликнете в заглавната част на иконата флаг, "Формула" на надпис и запълване на фона, като същевременно отбелязва кои слоеве са отговорни за изготвянето на оформлението на всеки елемент.

В резултат на това в панела Слоеве видите три слоя, които заедно съставляват шапката: "Формула", "Layer26", "Shape2":

За по-нататъшна работа с пластове от данни на най-удобният вариант е да ги копирате в отделен нов документ. Това постига две цели:

  • Първо - с отделно изолиран от слоевете на документа по-лесно да се работи;
  • второ - така че ние трябва да се предпазят от случайни неволни промени в изходния документ.

И въпреки, че там е инструмент, "История" в Photoshop, все едно, този метод изглежда е по-удобно за мен.

Така че, изберете всички три слоя. За да направите това, ние натиснете Ctrl и се превръща ние бутон на мишката на "Формула" бутона слой ", Layer26", "Shape2". След това отидете в меню "Слоеве - Дублиране на слой".

Отваря малък "Duplicate слой" диалоговия прозорец, който се избира дестинация "документ - Нов" и кликнете OK. Избрани контакт слоеве (ще се създадат копие) се дублира в новия документ, Photoshop, които автоматично ще се отворят в нов раздел "Untitled-1.

Шахматни във фонов режим означава, че основният слой е прозрачен. Премахнете ненужните фонови прозрачни пиксели, които ние не се нуждаят. Но преди това, отново се анализира три дублирания слой.

Layer "формула" означава текст с ефект на сянка. Когато изрязвате логото ние ще го напусне, тъй като е - с сянка. В този случай текстът "удари" в капачката на бъдещата шаблон сайт непроменен - ​​съставен от проектанта на шрифта, който е избрал. Това напълно ни удовлетворява.

Следващият слой - икона на флаг. Него ние също трябва да прехвърли на заглавната част на шаблон. Трети слой - за запълване на фона градиент. Слоят панел можем да видим, че последните два слоя са свързани един с друг - "Layer26" и "Shape2".

В допълнение, слой прилагат "Shape2" ефекти - вътрешна и външна сянка. От тях ние можем лесно да се отървете от, така че те изпълняват свободно с помощта на правила CSS стил, че можем да предписват в бъдещия модел. Така че да ги деактивирате, като кликнете на "око" в квадратчето "Ефекти":

След отстраняване на прозрачни пиксели на основния слой. За това ние използваме функцията "подстригване". Отидете в меню "Image - Изрязване".

Отваря се прозорец, в който ние виждаме, че премахването на допълнителните пиксели ще бъдат направени въз основа на прозрачни пиксели, и в същото време рязането ще се проведе от всички страни на картината: горе, долу, ляво, дясно. Натиснете OK:

Ние виждаме, че на фона се отстранява и само самото изображение остава: фон, "Формула" флаг и надпис. Сега трябва да се отстрани за запълване на фона. Ние ще го направим с CSS, включително градиент. Това ще намали размера на получения файл, който има положителен ефект върху скоростта на изтегляне на сайта.

За да направите това, просто да изтриете слоя "Shape2", която е на фона на заглавието. Изберете го в панела Слоеве и натиснете клавиша за изтриване. Оказва се, тази снимка на панела:

В Photoshop, операционната прозореца също се променя нещо. А именно - Премахване на пълнене и оставяйки само символ флаг и "формула" надпис.

Това е точно това, което е необходимо. И пак имаше шахматна дъска на мястото на бившия слой Shape2. Нейният можем да отново да бъде изтрита. Или по-скоро - да отрежете полученото изображение по същия начин - чрез функцията "подстригване".

В крайна сметка, ние се стремим да се намали размера на полученото изображение до минимум и допълнителни нас пиксела до нищо. Ние го режеш с подстригване, и да получите резултата:

Всичко е готово - ние получихме това, което е необходимо. Остава да спаси полученото изображение както трябва да бъде - за мрежата. Разбира се, запазване произведе PNG. тъй като поддържа прозрачните пиксели (необходими за фона) и добри цветове възпроизвеждане на цветовете (градиент). Самият процес на съхраняване, аз няма да се опише - тя е проста и е описан много пъти в мрежата.

Създаване на правила за стил да ограничи бъдещото шаблона на сайта: