Cze
9
2014

Tniemy szablon z .psd do html/css

Na warsztat bierzemy przygotowany i zaakceptowany przez zleceniodawce szablon strony firmy Renoma zajmującą się organizacją szkoleń.

renoma1

Technik cięcia jest dużo, może dlatego że program Adobe Photoshop daje nam wiele możliwości osiągnięcia tego samego efektu, a że korzystają z tego programu w większości ludzie kreatywni, to i tych technik, skryptów i metod ciągle przybywa.

Ja oprócz wcześniej omawianego „eksportowania warstw do plików” przygotowuję sobie taki plik pod późniejsze kodowanie również za pomocą innej metody. Pierwszą czynnością jest zaznaczanie narzędziem zaznaczenie prostokątne wybranej aktywnej warstwy, później skopiowanie jej za pomocą skrótu ctrl+c, otwarcie nowego pliku i wklejenie warstwy w ten plik ctrl+v.

renoma4

renoma5

Warto zwrócić uwagę, iż nie musimy przejmować się tym, że nasze zaznaczenie prostokątne nie jest dokładne względem szerokości i wysokości logo. Tworząc nowy plik program automatycznie dopasuje nam te wielkości do przycięcia danej warstwy. Oczywiście objętość możemy korygować później za pomocą kadrowania.

—————————————————————————————————–

Zobacz kurs Photoshop kodowanie HTML & CSS -> TUTAJ

—————————————————————————————————–

Wycinać warstwy możemy również za pomocą cięcia na plasterki.

renoma6

Każdą warstwę dokładnie obrysowujemy za pomocą tego przyklejającego się do brzegów piórka.

renoma7

Oczywiście pamiętajcie żeby każdą indywidualną warstwę obrysować – ja zrobiłem to niedokładnie w celu prezentacji. Warstwy które się powielają należy obrysować tylko raz – po co nam kopie takich samych przycisków. Gdy wyrysowaliśmy już elementy naszego projektu nie zapisujemy projekty tradycyjnie, a używamy opcji plik -> zapisz dla internetu. Pojawi się nam okno, w którym będziemy mogli wyeksportować nasze warstwy do konkretnych plików.

renoma8

Z ciekawszych rzeczy jest tutaj dostępny podgląd w przeglądarce wraz z kilkoma linijkami kodu css np.: zmieniającego tło strony – body bgcolor="#FFFFFF".

Jeżeli i Wy macie ciekawą metodę na pocięcie pliku .psd zapraszam do podzielenia się nią w komentarzach.


Podobne wpisy

O autorze: Mariusz Strząbała

Jego pasje to grafika komputerowa, fotografia i siatkówka. Obecnie zajmuje się przygotowaniem do druku materiałów reklamowych, projektowaniem pełnego pakietu indywidualnego dla firm, np.: projekty wizytówek, ulotek, plakatów, logotypów, stron www.

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie