Tre trucchi di progettazione rapida scoppiano schermate, Easy Starbursts e trame Grunge vettoriale

Oggi abbiamo una piccola raccolta di trucchi di design completamente casuali ma molto utili che dovresti tenere nella tua mente la prossima volta che hai bisogno di una nuova idea.

Ti mostrerò un modo rapido per rendere più interessante uno screenshot del software, come creare fantastiche trame del grunge vettoriale e un modo super veloce per costruire uno starburst vettoriale.

Screenshot Breakout

Quando stai progettando un sito web per un'applicazione web o desktop, finirai inevitabilmente a incorporare alcuni screenshot nel tuo design, il che è ottimo perché creano una grafica accattivante che è semplicissima da creare. Basta far apparire l'app sul tuo desktop attraente ma minimale, colpire una scorciatoia da tastiera, aggiungere del testo e il gioco è fatto!

Questo è sicuramente un modo meravigliosamente semplice per creare opere d'arte per un sito Web, ma vale la pena di dedicare un po 'di attenzione a come si può andare oltre e rendere la grafica ancora più interessante.

Un modo molto semplice per farlo è quello di fare in modo che lo screenshot superi i limiti dell'immagine di sfondo. Questo trucco semplice e veloce rende il tuo design più vivo e stratificato.

Ora, il modo lungo e difficile per eseguire questo trucco sarebbe quello di mascherare parte dello sfondo sullo screenshot, ma questo è un vero dolore. È molto più semplice creare semplicemente un PNG trasparente della finestra dell'app che non contiene sfondo, che puoi quindi posizionare su qualsiasi cosa tu desideri in Photoshop.

Per fare ciò su un Mac, premi Comando + Maiusc + 4 per far apparire il mirino che ti permetterà di fare uno screenshot di un'area selezionata. Quindi posiziona il cursore sulla finestra dell'app e premi la barra spaziatrice. Il puntatore a croce dovrebbe trasformarsi in un'icona della fotocamera e la finestra su cui stai passando il mouse dovrebbe essere evidenziata. Basta fare clic per creare un file sul desktop contenente quella finestra e la sua ombra su uno sfondo trasparente. Gli utenti Windows possono seguire questi passaggi per l'apertura di uno screenshot della finestra.

Una volta che hai preso lo screenshot della finestra, prendi uno sfondo per posizionarlo e aprilo entrambi in Photoshop.

Da qui, è facile ritagliare lo sfondo in modo che lo screenshot ne esca. Notare che ho preso il percorso opposto nella parte inferiore dello screenshot, che è nascosto nell'immagine di sfondo.

Nella natura selvaggia

Questo trucco è molto comune nel web design in questo momento e può essere visto su qualsiasi numero di software desktop e siti di app web. Un esempio brillante è l'attuale sito Sparrow per Mac.

Easy Illustrator Starburst

Esito a insegnarti questo trucco semplicemente perché di solito odio le starburst nel design. Tuttavia, accetterò che ci sono in effetti alcuni usi legittimi per loro. Ancora più importante, conosco un bel trucco per realizzarli che amo mostrare.

Per iniziare, apri Illustrator e disegna un cerchio. Quindi imposta il tratto del cerchio su una linea tratteggiata. I parametri non contano troppo a questo punto, ma assicurati di avere qualcosa che assomigli in questo modo:

Ecco la parte divertente. Prendi il peso della gittata sulla tua cerchia e spostalo oltre qualsiasi cosa logica (a centinaia). Infine, imposta i tuoi primi trattini e valori di gap per essere identici. Il risultato è una bella starburst perfetta.

La parte fantastica è che questo trucco ti dà il pieno controllo della larghezza delle linee e degli spazi vuoti. Ecco un esempio leggermente modificato che è un po 'più diffuso.

Prendilo ancora di più e aggiungi alcuni valori casuali ad alcuni degli altri trattini e spazi vuoti. Questo inizierà a darti dei risultati davvero creativi, ecco un piccolo schema che mi ricorda una menta piperita.

Espandilo

Ora, lavorare a lungo termine con un oggetto accattivante e funky come questo diventerà disordinato quindi, una volta che deciderai sulla tua forma generale e sul patter, ti consiglio di andare su Oggetto> Appiattisci trasparenza. Questo ti darà uno starburst vettoriale carino, espanso che sembra che tu l'abbia costruito nel modo più duro (il tratto del contorno dà alcuni risultati strani). Assicurati di eliminare il tratto del cerchio originale per mantenere le cose pulite.

Texture vettoriale sgangherato

Le texture fotografiche grunge sono facili da trovare, texture grunge vettoriale, non così tanto. Fortunatamente, è abbastanza facile creare quest'ultimo attraverso l'uso del primo.

Iniziamo col colpire Flickr Creative Commons per trovare una trama grunge decente. Ecco una grande di D. Sharon Pruitt.

Ora, l'ho scelto intenzionalmente perché contiene graffi chiari su uno sfondo scuro, il che sembra che sarebbe molto più difficile da lavorare, ma in realtà non lo è affatto.

Apri la texture in Photoshop, premi Comando + I per invertire i colori e improvvisamente avrai uno sfondo bianco con graffi neri. Quindi usa una regolazione di Livelli di base per far apparire i bianchi e i neri. Il risultato dovrebbe essere simile a questo:

Ora salva l'immagine come JPG e aprila nell'illustratore. Da qui, abbiamo alcune forme di base che possono essere tracciate automaticamente con una precisione relativa. Esegui il comando Auto Trace e imposta i tuoi parametri su qualcosa di simile a quelli mostrati sotto. Un passaggio fondamentale qui è assicurarsi di fare clic sul pulsante? Ignora il bianco? comando in modo che Illustrator traccia solo le parti nere.

Da qui è sufficiente premere il tasto? Espandi? pulsante nella barra dei menu. Questo ti darà graffi grunge scalabili e facilmente applicabili al 100%.

Possiamo combinare questo trucco con l'ultimo e abbiamo un fantastico pezzo retrò di grafica vettoriale. Molto carino!

Conclusione

Questi post di punta rapidi hanno lo scopo di espandere il tuo bagaglio di trucchi in modo da avere un pool di idee più ampio da attingere al tuo prossimo progetto di design. Spero che tu abbia imparato una cosa o due e sia stato ispirato a elaborare le tue idee uniche basate sulle informazioni di cui sopra.

Lascia un commento qui sotto e facci sapere di tutte le tecniche che hai visto sul web ma non sei sicuro di come replicare.Daremo un'occhiata e vediamo se possiamo aiutarti nel prossimo post sui trucchi del design.