Od dolaska verzije CS6, Adobe je u Photoshopu implementirao vrlo korisnu opciju za postavljanje i razvoj web dizajna. Operacija je vrlo jednostavno i prije svega brzo. Kroz aplikaciju ćemo moći generirati kaskadne tablice stilova uzimajući kao referencu naše slojeve oblika i 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ćuje da vidimo razvoj našeg dizajna u vizualnom smislu i u stvarnom vremenu. Evo nekoliko savjeta kako koristiti ovu opciju i dobiti maksimalna učinkovitost:
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 kôd, stavit ćemo svaki element uzimajući kao referencu udaljenost u pikselima između svakog elementa i rubova 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 web stranice s velikom preciznošću od upotrebe slojeva 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
- Posición
- Boja poteza
- Boja ispune (uključujući gradijente)
- Bacite sjenu
Iz slojeva teksta možemo uhvatiti sljedeće vrijednosti:
- Obitelj fontova
- Veličina slova
- Debljina slova
- Visina crte
- Podcrtano
- precrtano
- Nadpisnik
- Pretplata
- Poravnanje teksta
Imajte to na umu i postavite svaku od ovih vrijednosti da pruži stil koji tražite.
Radite s grupama slojeva
Ova funkcija prevodi naš rad organiziran prema dvije vrste klase, po jednu za svaku skupinu 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 skupinu. 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, osim ako su grupirani.
Koraci za pretvorbu
Nakon što napravite maketu, prilagodite svaki element i grupirate ih po skupinama, morat ćete slijediti 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 skupinu slojeva i odaberite Kopirajte CSS u kontekstnom izborniku.
- Odaberite sloj oblika ili teksta ili skupinu slojeva, a zatim odaberite opciju Kopirajte CSS u izborniku ploče Slojevi.
-
Zalijepite kôd u dokument tablice stilova i primijenite ga na svoje stranice putem html5.
