Cięcie PSD

Praca w grupie polega na rozdzieleniu zadań na poszczególne osoby. Będąc junior front developerem prędzej czy później dostaniesz zlecenie zakodowania strony z wcześniej przygotowanego pliku przez grafika. Nie panikuj Zabierając się za cięcie pliku (najczęściej plik psd czyli Photoshop), przemyśl które elementy tak na prawdę jesteś w stanie stworzyć w css. W większości nowoczesnych projektów graficznych – 80% witryny możemy ostylować za pomocą css-ów. Sam kiedyś myślałem, że pocięcie strony w Photoshopie polega na rozdzieleniu jej na plasterki i złożeniu ich w html-u. 🙂 Przechodząc do meritum, jako początkujący front-end dev korzystałem, albo inaczej, natrafiłem na projekty przygotowane tylko w formacie psd. Dlatego odnoszę się do cięcia  w tym programie.

Od czego zacząć ?

Weźmy na przykład jeden z wielu darmowych szablonów znajdujących się w sieci: „acrostia_onepage_template_by_outline”

 

szablon darmowej strony

Projekty zapisane w formacie .psd tworzone są w taki sposób, aby każdy jego element był na osobnej warstwie. Zazwyczaj wystarczy znaleźć warstwę zawierającą obrazek i zapisać go jako plik już formacie .jpg czy .png.

W przykładzie poniżej została wyłączona warstwa „slider”, dzięki czemu logo witryny możemy za pomocą narzędzia „cięcie na plasterki” zaznaczyć i zapisać w postaci pliku .png, dzięki czemu będzie miało przeźroczyste tło.

W drugiej części strony oprócz grafik znajdujących się w czterech kolumnach, loga i jasnych fal które możemy dostrzec w backgroundzie strony wszystko inne jesteśmy w stanie wykonać za pomocą html/css. A wieć wzaznaczmy i wytnijmy te elementy:

Zwróć uwagę na to że zapisując teraz wycięte warstwy zapiszą się nam one razem z czerwonym tłem. Na warstwach więc musimy wyłączyć „home_bg”. W przypadku ikonek musimy tez wyłączyć ich tło pod nazwą block_bg.

Tak przygotowane elementy z tej witryny możemy zapisać. Nie stosujemy tutaj polecenia zapisz jako. Robimy to za pomocą polecenia z menu górnego Plik -> Zapisz dla Internetu. (Alt+Shitf+Ctrl+S). Możemy zaznaczyć sobie plasterek, który chcemy w pierwszej kolejności zapisać używając narzędzia „zaznaczanie plasterków”, które znajduje się w tej samej grupie co cięcie na plasterki.

W oknie które nam się pokaże mamy możliwość dobrania jakość wyświetlanych plików. W zależności od wielkości zapisywanego obrazu jakość możemy zmieniać. Pamiętamy o tym że zbyt ciężkie pliki graficzne na stronie, przyczynia się do jej spowolnienia.

Zapisując plasterki musimy zwrócić szczególna uwagę na jakość zapisywanej grafiki i jej rozmiar. W zależności od potrzeb jakość możemy zmniejszać bądź zwiększać, spoglądając na tym samym jak ciężki będzie nasz plik. Kropką czerwoną zaznaczone są opcje jakości obrazu, a zieloną jej waga. W tym wypadku ikona którą zapisujemy ma niewiele bo 2,344K przy jednoczesnej jakości wyświetlania równej 65%.

Jednak tworząc stronę często napotkamy się na wysokiej jakości zdjęcia np. w głównym sliderze strony, które jakość wyświetlania muszą mieć dużą aby były miłe dla oka. W takim przypadku mogą sięgać rzędu 300-400 K.

Pamiętajmy aby operować tymi opcjami w taki sposób, żeby dobrać najodpowiedniejsze ustawienia dla wyświetlanego obrazu

 

 

 

Dodaj komentarz

3 komentarzy do "Cięcie PSD"

Powiadom o
avatar
Sortuj wg:   najnowszy | najstarszy | oceniany
iza
Gość

good job!

Xyz
Gość

A gradienty ??

wpDiscuz