A volte hai un layout perfetto, ma il tuo design ha bisogno di qualcosa in più per finirlo. Sfortunatamente, è facile rimanere bloccati e diventare completamente privi di idee.
Oggi ti aiuteremo a risolvere questo problema evidenziando cinque idee progettuali casuali che puoi incorporare nella tua parte posteriore dei trucchi del design. Iniziamo!
Linee tratteggiate
Le linee tratteggiate o tratteggiate sono un ottimo modo per dare un tocco di stile ai tuoi progetti. Sono super facili da implementare e tendono a portare un po 'di classe vecchia scuola in un progetto. In Illustrator, creare un tratto tratteggiato è semplice come aprire il? Tratto? tavolozza.
Prova a variare l'uso della linea tratteggiata. Posiziona uno in verticale tra gli elementi in un elenco orizzontale, prova solo una sottolineatura del testo o magari anche a creare un rettangolo completo.
Puoi anche realizzare una linea tratteggiata o tratteggiata usando puro CSS tramite confine proprietà.
Traceflow, il sito web mostrato di seguito, è un ottimo esempio di utilizzo della tecnica delle linee tratteggiate. Ecco un colpo della loro area di navigazione:
cucita
Lo stesso sito web mostra una versione leggermente modificata della tecnica. Se si mettono le linee tratteggiate in un po 'in modo che siano sfalsate rispetto al bordo, il risultato è un aspetto cucito.
Easy Text Lockups
I blocchi di testo come quello sopra sono estremamente popolari al momento. Saranno probabilmente un brutto cliché? nel prossimo futuro ma per ora tutti sembrano amarli. Sembrano un pezzo di design davvero elaborato ma in realtà sono abbastanza facili da costruire. Basta prendere alcuni font che sembrano buoni insieme e rendere le larghezze della linea uguali. Assicurati di variare il numero di parole per riga in modo che alcune parole siano più grandi di altre e l'enfasi sia posta esattamente dove vuoi tu.
Prova a mixare in una grafica semplice ma attraente con il tipo per un maggiore interesse. Si noti come ho effettivamente utilizzato la forma a doppia linea di uno dei caratteri come ispirazione per una linea di divisione verticale. Questo è un esempio da manuale del principio della ripetizione. Dovresti cercare opportunità simili nel tuo lavoro.
La cosa che rende queste cose così facili è che le persone che hanno creato i font hanno fatto tutto il lavoro. L'attrattiva estetica è nell'attrattiva delle forme delle lettere. Questo è uno dei motivi principali per cui gli stilisti amano così tanto la tipografia. Qualcun altro fa tutto il lavoro, poi lo gettiamo su una tela e ne prendiamo il merito!
Naturalmente, tutti i blocchi di testo veramente grandi hanno un po 'più di lavoro. Dai un'occhiata a questo fantastico esempio di Deda.me, che mette in mostra alcune belle varianti di testo, grafica e colore. Ci sono anche un sacco di fantastici effetti al passaggio del mouse qui, quindi assicurati di fermarti al sito e dare un'occhiata.
Effetto adesivo
L'effetto adesivo è così ridicolmente facile da sembrare sciocco. Tutto ciò che realmente fai è prendere qualsiasi immagine e lanciarla su uno sfondo con un tratto bianco e spesso un po 'd'ombra. Questo è un buon trucco da usare quando si ha una sensazione luminosa, divertente e retrò. Perché questa tecnica si presta a colori vivaci e illustrazioni interessanti, è ovviamente perfetta se stai progettando qualcosa per bambini.
In Photoshop, tutto ciò che devi fare è alzare il tiro finché non sembra bello. Per il testo, potresti dover entrare e compilare manualmente le aree negative nelle lettere, ma di solito è un processo super veloce.
Possiamo vedere questa tecnica in azione, ovviamente, su un sito web di adesivi! Controlla l'illustrazione qui sotto da Sticker Mule.
Un'alternativa economica a un buon tracciato di ritaglio
Questo trucco può anche essere utilizzato per risolvere un ostacolo progettuale comune. Se sei troppo pigro o inesperto per costruire un percorso di ritaglio adeguato, può essere difficile posizionare una foto che è stata scattata su uno sfondo bianco su una tela scura senza mostrare alcuni artefatti.
Qui tutto ciò che devi fare è effettuare una selezione molto veloce e sporca, quindi applicare una spessa traccia bianca. Il risultato sembra abbastanza intenzionale, nessuno saprà nemmeno che fai schifo con Photoshop!
Banner pubblicitari
Vuoi un modo divertente per animare un titolo? Attaccalo su un banner. Questa è un'altra tendenza che è molto popolare nel web design di oggi, puoi trovare questa idea su tutto il web.
Come puoi vedere nell'immagine sopra, ci sono tre varianti principali del tuo banner tipico, che possono essere utilizzate insieme in un sito. Il primo è un banner indipendente, che si ripiega su se stesso alle estremità.
Se ti stai chiedendo come realizzare l'effetto 3D, non potrebbe essere più facile. Innanzitutto, scegli un colore per la parte principale o anteriore del banner. Quindi scegliere a leggermente tonalità più scura per le parti laterali. Infine, crea un piccolo triangolo e rendilo ancora più scuro. I tre pezzi sono mostrati separati e quindi insieme nell'immagine sottostante.
Le altre due versioni del banner sono una variazione su questo tema. Questa volta però, l'idea è quella di avvolgere il banner attorno ad alcuni contenuti. È possibile far sbirciare il banner da un lato come nel secondo esempio o avvolgere l'intero oggetto come nel terzo esempio.
Il sito Web WPCoder effettivamente utilizza tutti e tre variazioni del banner nel suo design. Ecco alcuni screenshot di alcuni degli elementi.
Questi sono stati creati con le immagini ma sta diventando piuttosto comune ottenere un effetto simile usando solo HTML5 e CSS3. Dai un'occhiata a questo tutorial di WebDesignTuts per una panoramica di questo processo.
Metti una foto nel tuo testo
A volte un semplice titolo di colore solido sembra noioso. Metti un'ombra su di esso e magari prova a smussarlo, ma questo uccide il classico, semplice look che stai cercando. Qual è la soluzione? È facile! Basta usare una foto come sfondo per il tuo testo.
Costruire uno di questi titoli in Photoshop è un gioco da ragazzi. Tutto ciò di cui hai bisogno sono due strati.Per prima cosa, scrivi del testo e fallo come vuoi. Quindi lancia una foto sopra e colpisci Cmd-Opzione-G o andare a Livello> Crea maschera di ritaglio. Questo è tutto ciò che c'è da fare! Ora puoi spostare i livelli di testo e immagine in modo indipendente e la clip rimarrà.
Usando i CSS
Puoi effettivamente realizzare questa stessa tecnica in CSS attraverso l'uso di background-clip: text o maschera-image. Trent Walton ha un breve ma pratico tutorial su come realizzare proprio questa cosa.
Tieni presente che se vuoi che tutti gli utenti sperimentino l'effetto, dovrai usare un'immagine. Come con la maggior parte delle nuove funzionalità CSS, il supporto del browser è discutibile per queste proprietà.
Conclusione
Spero che questi trucchi di progettazione semplici e veloci ti abbiano spinto a pensare un po 'più a fondo su come puoi cambiare le cose nel tuo tipico processo di progettazione. È probabile che tu li abbia visti in azione un migliaio di volte, ma prendere coscienza di loro ti aiuterà ad espandere i tuoi orizzonti come designer.
Lascia un commento e facci sapere cosa ne pensi! Utilizzi regolarmente qualcuno di questi? Inizierai ora?