Od dolaska verzije CS6, Adobe je u Photoshopu implementirao vrlo korisnu opciju za postavljanje i razvoj web dizajna. Operacija je vrlo jednostavno i iznad svega brzo. Kroz aplikaciju ćemo moći generirati kaskadne listove stilova uzimajući za referencu naše oblike i slojeve teksta. Postupak je jednostavan poput razvijanja naše makete, kopiranja verzije koda naših elemenata i lijepljenja na naš list.
To je vrlo dobra opcija, pogotovo jer nam omogućava da vidimo razvoj našeg dizajna u vizualnom smislu i u stvarnom vremenu. Evo nekoliko savjeta kako koristiti ovu opciju i dobiti je maksimalne performanse:
Pokušajte biti precizni
Da biste dobili profesionalni rezultat, preporučuje se da uzmete u obzir mjere i proporcije vašeg web mjesta. Postavite vrijednosti Širina i Visina predloška koji dizajnirate i primijenite ih na svoju maketu. Kada kopirate CSS kod, stavit ćemo svaki element uzimajući kao referencu rastojanje u pikselima između svakog elementa i ivica platna. Također uzmite u obzir veličine i hijerarhijske razloge koje ćete uključiti u svoj dizajn, uključujući poravnanje svakog elementa i razmak između svakog od njih kako biste svojim korisnicima pružili maksimalnu čitljivost.
Korištenje vodiča i pravila sučelja pomoći će vam da napravite uredan, čist predložak sa svim elementima koji su savršeno poravnati.
Konfigurirajte sve karakteristike svakog elementa
Opcija za kopiranje CSS koda daje nam mogućnost dizajniranja naše stranice s velikom preciznošću koristeći slojeve oblika i teksta. Sadržaj svakog sloja kopirat će se u međuspremnik i možemo ga brzo zalijepiti u našu tablicu stilova. Iz slojeva oblika uhvatite vrijednosti za sljedeće postavke:
- Veličina
- Pozicija
- Boja poteza
- Boja ispune (uključujući gradijente)
- Baci senku
Iz slojeva teksta možemo uhvatiti sljedeće vrijednosti:
- Porodica fontova
- Veličina slova
- Debljina slova
- Visina linije
- Podvučeno
- Precrtavanje
- Superscript
- Subscript
- Poravnanje teksta
Imajte to na umu i postavite svaku od ovih vrijednosti kako biste pružili stil koji tražite.
Radite s grupama slojeva
Ova funkcija prevodi naš rad organiziran prema dvije vrste klase, po jednu za svaku grupu koja okuplja slojeve oblika ili teksta i klasu za svaki sloj jedne od ovih vrsta. Svaka klasa grupe predstavljat će nadređeni div element koji će sadržavati podređene div elemente i koji će odgovarati slojevima umetnutim u svaku grupu. Na taj će se način postaviti gornja i lijeva vrijednost podređenih spremnika u odnosu na nadređeni spremnik. Imajte na umu da ova opcija nije dostupna kod pametnih objekata i neće biti primjenjiva na više slojeva istovremeno, ako nisu grupirani.
Koraci za konverziju
Nakon što napravite maketu, prilagodite svaki element i grupirate ih po skupinama, trebat ćete slijediti samo ove korake:
- Idite na ploču slojeva i odaberite jednu od ove dvije mogućnosti:
- Desnom tipkom miša kliknite sloj oblika ili teksta ili grupu slojeva i odaberite Kopirajte CSS u kontekstnom meniju.
- Odaberite oblik ili sloj teksta ili grupu slojeva, a zatim odaberite opciju Kopirajte CSS u meniju ploče Slojevi.
-
Zalijepite kod u dokument tabele stilova i primijenite ga na svoje stranice putem html5.
