Kā mazāk nekā minūtes laikā pārveidot Photoshop dizainu uz CSS kodu

css-fotošops

Kopš CS6 versijas ienākšanas Adobe Photoshop ir ieviesis ļoti noderīgu iespēju noformēt un izstrādāt tīmekļa dizainus. Operācija ir ļoti viegli un galvenokārt ātri. Izmantojot lietojumprogrammu, mēs varēsim ģenerēt kaskādes stila lapas, atsaucoties uz mūsu formām un teksta slāņiem. Procedūra ir tikpat vienkārša kā maketa izstrāde, elementu koda versijas kopēšana un ielīmēšana uz mūsu lapas.

Tas ir ļoti labs risinājums, jo īpaši tāpēc, ka tas ļauj mums redzēt mūsu dizaina attīstību vizuālā izteiksmē un reāllaikā. Šeit ir daži padomi, kā izmantot šo opciju un iegūt maksimālais sniegums:

Centieties būt precīzi

Lai iegūtu profesionālu rezultātu, ieteicams ņemt vērā jūsu vietnes mērījumus un proporcijas. Iestatiet veidnes Platums un Augstums vērtības un izmantojiet tās savam maketam. Kopējot CSS kodu, mēs katru elementu ievietosim kā atskaites punktu attālumu pikseļos starp katru elementu un audekla malām. Lai nodrošinātu lietotājiem maksimālu lasāmību, ņemiet vērā arī izmērus un hierarhiskos iemeslus, kurus plānojat iekļaut dizainā, tostarp katra elementa izlīdzināšanu un atstarpi starp katru no tiem.

Ceļvežu un saskarnes noteikumu izmantošana palīdzēs jums izveidot kārtīgu un tīru veidni ar visiem tās elementiem, kas ir pilnībā izlīdzināti.

Web-photoshop

Konfigurējiet visas katra elementa īpašības

CSS koda kopēšanas iespēja dod mums iespēju ļoti precīzi veidot mūsu vietni, izmantojot formas un teksta slāņus. Katra slāņa saturs tiks kopēts starpliktuvē, un mēs to varam ātri ielīmēt stila lapā. No formas slāņiem uzņemiet šādu iestatījumu vērtības:

  • Tamano
  • Pozīcija
  • Insulta krāsa
  • Aizpildījuma krāsa (ieskaitot gradientus)
  • Krīt ēna

No teksta slāņiem mēs varam iegūt šādas vērtības:

  • Fontu saime
  • Fonta lielums
  • Fonta biezums
  • Līnijas augstums
  • Pasvītrots
  • Pārsvītrots
  • Virsraksts
  • Apakšraksts
  • Teksta izlīdzināšana

Paturiet to prātā un iestatiet katru no šīm vērtībām, lai nodrošinātu meklējamo stilu.

Darbs ar slāņu grupām

Šī funkcija tulko mūsu darbu, ko organizē divu veidu klases, viens katrai grupai, kas apvieno formu vai teksta slāņus, un klase katram šī veida slānim. Katra grupas klase pārstāv vecāku div elementu, kurā būs pakārtoti div elementi, kas atbildīs katrā grupā ievietotajiem slāņiem. Tādā veidā tiks iestatītas bērnu konteineru augšējās un kreisās vērtības, atsaucoties uz vecāku konteineru. Jums jāpatur prātā, ka šī opcija nav pieejama ar viedajiem objektiem, un tā nebūs piemērojama vairāk nekā vienam slānim vienlaikus, ja vien tie nav grupēti.

Veicamās darbības

Kad esat izveidojis maketu, katrs elements ir pielāgots un grupēts pēc grupām, jums būs jāveic tikai šīs darbības:

  • Dodieties uz slāņu paneli un izvēlieties vienu no šīm divām iespējām:
    • Ar peles labo pogu noklikšķiniet uz formas vai teksta slāņa vai slāņu grupas un izvēlieties Kopēt CSS konteksta izvēlnē.
    • Atlasiet formas vai teksta slāni vai slāņu grupu, pēc tam izvēlieties opciju Kopēt CSS paneļa izvēlnē Slāņi.
  • Ielīmējiet kodu stila dokumenta dokumentā un lietojiet to savām lapām, izmantojot html5.

    CSS-Photoshop1

    CSS-Photoshop2


Atstājiet savu komentāru

Jūsu e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti ar *

*

*

  1. Atbildīgais par datiem: Migels Ángels Gatóns
  2. Datu mērķis: SPAM kontrole, komentāru pārvaldība.
  3. Legitimācija: jūsu piekrišana
  4. Datu paziņošana: Dati netiks paziņoti trešām personām, izņemot juridiskus pienākumus.
  5. Datu glabāšana: datu bāze, ko mitina Occentus Networks (ES)
  6. Tiesības: jebkurā laikā varat ierobežot, atjaunot un dzēst savu informāciju.