Share
L'ultima build di Photoshop ha alcune fantastiche nuove funzionalità che attireranno sicuramente l'attenzione dei web designer. Ora puoi convertire la forma e lo stile di un livello in CSS con un solo clic. In questo articolo, spiegheremo come funziona. Diamo un'occhiata!
Questa nuova funzione di Photoshop che vedremo è una cosa di cui sono piuttosto entusiasta. La possibilità di convertire gli stili di livello di Photoshop in CSS è stata utilizzata per un po 'attraverso strumenti di terze parti, ma mai in modo nativo. Gli sviluppatori Web hanno costantemente il compito di convertire i disegni di Photoshop in live design basati su CSS3. A seconda della complessità dell'oggetto, questo può richiedere un po 'di tempo.
Non sarebbe bello se Photoshop potesse semplicemente fare la conversione per te? Buone notizie: ora può. Vediamo come funziona.
Per iniziare, proviamo a convertire un pulsante di base in Photoshop. Come puoi vedere, ho iniziato con un semplice rettangolo con angoli arrotondati, quindi aggiungo alcuni stili di livello. Innanzitutto, ho usato la sovrapposizione dei gradienti. Successivamente, userò un set di ombre interne da sovrapporre per mettere un bel risalto in alto. Alla fine ho creato una sottile ombra.
Ora che abbiamo una buona idea di come il pulsante è costruito in Photoshop, convertiamolo in CSS. Ci sono due modi per fare questo. Il primo è selezionare il livello e andare a Livello> Copia CSS nella barra dei menu. L'altro modo è fare clic con il tasto destro sul livello e selezionare l'opzione "Copia CSS" dal menu che appare. Questo copierà il codice CSS nei nostri appunti in modo che possiamo inserirlo nel nostro editor di codice preferito.
Prima di andare a controllare, nota che ho chiamato il mio "pulsante" di livello in minuscolo. Questo è importante perché sarà convertito in un nome di classe nel nostro codice finale.
Se passiamo a un editor di codice, possiamo provare il nostro codice pulsante per vedere se ha funzionato. Per prima cosa creerò un div nel mio html e gli assegnerò una classe di "pulsante". Ora passerò al CSS e semplicemente incollerò il codice inserito da Photoshop nei miei appunti.
.pulsante
border-radius: 10px;
background-image: -moz-linear-gradient (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
background-image: -webkit-linear-gradient (90 gradi, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
box-shadow: 0px 5px 4px 0px rgb (0, 0, 0);
posizione: assoluta;
a sinistra: 249 px;
top: 245px;
larghezza: 300 px;
altezza: 100 px;
z-index: 2;
Come puoi vedere, per noi è stato scritto un bel pezzo di codice. Sembra che la forma e il colore siano chiari con la nostra versione di Photoshop, ma non tutto è stato copiato correttamente.
Per i principianti, l'ombra discendente è in piena opacità nonostante la ridotta opacità nella nostra versione di Photoshop. Mi sarei aspettato che Photoshop usasse RGBa per ottenere questo effetto. Oltre ai problemi di ombreggiatura, la nostra ombra interiore è stata semplicemente ignorata, quindi non c'è alcun punto saliente nella parte superiore.
Tutto sommato, siamo partiti con un buon inizio. Photoshop ci ha risparmiato un bel po 'di codice e ha persino fatto il possibile per includere alcuni prefissi del browser per garantire la massima compatibilità.
Solo per fare un paragone, paragoniamo la nuova funzione Copy CSS incorporata di Photoshop a un plugin Photoshop gratuito chiamato CSS3Ps, che essenzialmente promette la stessa funzionalità.
Ancora una volta, selezionerò il mio livello, solo che questa volta colpirò il plugin CSS3Ps. Questo lancia una pagina web dove devo aspettare un enorme 20s per vedere i miei risultati. Questo è certamente super fastidioso, ma una volta che i risultati sono saltati fuori, in realtà sono meglio della funzione Photoshop integrata.
Come puoi vedere, in questa versione sono presenti sia l'evidenziazione superiore che l'opacità ridotta dell'ombra di casella. Per andare oltre, puoi ottenere i tuoi risultati in Sass, una fantastica opzione che mi piacerebbe vedere da Photoshop in futuro.
Per ottenere questo aggiornamento, i clienti possono seguire le seguenti istruzioni.
Non stai usando il Creative Cloud? Puoi iscriverti a Creative Cloud e ottenere l'accesso a tutti questi aggiornamenti, così come al resto della Creative Suite per soli $ 49,99 al mese.
Accentsconagua