Disegnare forme personalizzate

Le forme hanno fatto molta strada in Photoshop e sapere come utilizzarle nella tua applicazione può significare la differenza tra successo e fallimento. Le forme possono portare profondità, equilibrio e unità alle tue app. Questo tutorial ti presenterà lo strumento di forma di Photoshop e ti insegnerà a disegnare forme personalizzate di base. Nel processo, sarai preparato per il prossimo tutorial di questa serie: creazione di pulsanti.

Prima di iniziare, lascia che ti mostri cosa intendo quando parlo della relazione tra forme, profondità, equilibrio e unità.

Ad esempio, utilizziamo l'interfaccia predefinita per iPhone e telefoni Android. I pulsanti, le icone o le scorciatoie su entrambi i telefoni appaiono come se fossero seduti sullo sfondo, che è la profondità. Dove i telefoni iniziano a differire, tuttavia, è per quanto riguarda l'equilibrio e l'unità.


icone di iPhone

Apple è orgogliosa del design (come dovrebbero) e mentre entrambi i telefoni fanno scattare le icone in posizione, iPhone mantiene le icone unite in un ordine specifico. I telefoni Android possono avere alcune icone nella parte superiore e alcune icone nella parte inferiore, che possono rovinare enormemente il bilanciamento dello schermo. Cambia funzionalità? No. È utilizzabile? È un'abitudine, quindi se funziona per te, allora sì. Sembra il migliore? No. Non sembra il migliore perché non è bilanciato.


Icone Android

Lo stesso si potrebbe dire per l'unità. L'iPhone ha una dimensione e forma standard per le icone. Il contenuto all'interno delle dimensioni e della forma può variare e varia. Android ha solo una dimensione standard, ma nessuna forma standard. Limitando tutte le icone alle stesse dimensioni e soprattutto alla stessa forma, Apple crea un'unità perfetta. Niente sembra fuori posto. Ma questo non è e Apple contro dibattito Android, e mentre io sono un utente Mac, ho scelto di utilizzare un telefono Android su iPhone, quindi non sono parziale.


Ora andiamo avanti con l'apprendimento dello strumento forma Photoshop:

  1. Apri Photoshop e crea un nuovo documento.
  2. Userò i seguenti preset solo per mantenerlo semplice.
  3. Seleziona lo strumento Forma (U) dalla barra degli strumenti.
    Fai clic per espandere le opzioni di forma. Puoi anche guardare la barra delle opzioni per vedere le diverse forme disponibili.
  4. Ci sono più opzioni nella barra delle opzioni di quelle che copriremo, quindi ci concentreremo solo sulle sei opzioni di forme reali che abbiamo. Otterremo di più nello strumento penna in un prossimo tutorial.

  5. Per disegnare una forma, seleziona la forma che ti serve dalla barra delle opzioni, ho scelto un cerchio.
  6. Fare clic e trascinare sulla tela per creare la forma.
  7. Nota come non abbiamo ancora scelto il colore desiderato. Non agitarti, possiamo cambiare il colore abbastanza facilmente dopo che la forma è stata disegnata. Nella tavolozza dei livelli, cerca il nuovo livello denominato "Shape-1".

  8. Fare doppio clic sul campione colorato del livello Shape-1 nella tavolozza dei livelli per aprire il selettore di colori.
  9. Scegli un colore e clicca OK.

Quindi quella era la vista di 30.000 piedi di creare una forma. In questo esempio ho appena usato la forma ovale, ma c'è molto di più che puoi fare con altre forme.


Ecco alcuni piccoli suggerimenti per rendere il lavoro con le forme un po 'più efficiente e più semplice.

  1. Opzioni di forma
  2. Barra spaziatrice
  3. Tasto Alt
  4. Maiusc Key (senza forma esistente)
  5. Maiusc (con forma esistente)
  6. Alt (con forma esistente)
  7. T Ctrl +

Opzioni di forma

Per impostazione predefinita, senza modificare alcun preset, Photoshop ti darà forme simili a queste. Lo strumento forme personalizzate ha anche un intero sottoinsieme di forme dall'elenco a discesa, che offre maggiore libertà creativa.

Ogni forma, personalizzata o meno, ha impostazioni che ti permettono di personalizzare queste forme e semplificarti la vita nel processo.

L'opzione "Non vincolato" consente di creare una forma esattamente delle dimensioni che si desidera senza mantenere la proporzione delle forme (questa è l'impostazione predefinita). Per le forme rettangolari, l'opzione "Quadrato" ti consente di creare un quadrato perfetto. Puoi anche impostare dimensioni e proporzioni fisse. Se conosci esattamente le dimensioni di cui hai bisogno, specificalo qui e ti semplificherà la vita! Poi ci sono due caselle di controllo. La casella "Dal centro" disegna la forma attorno all'origine del mouse invece della direzione in cui il mouse sta andando e l'opzione "Blocca su pixel" fa proprio questo.


Onestamente non uso queste due opzioni un bel po 'perché mi piace usare le scorciatoie spiegate di seguito meglio. È solo più veloce!

Barra spaziatrice

Ah, questo è uno dei miei preferiti. Tenere premuto la barra spaziatrice quando si disegna una forma consente di riposizionare la forma mentre si disegna. Non importa se tieni premuto prima o dopo aver fatto clic per iniziare a disegnare la forma.

NOTA: Se hai già rilasciato il mouse, è troppo tardi. Dovrai solo spostarlo manualmente.

Fai clic per iniziare a disegnare, tieni premuta la barra spaziatrice, quindi inizia a muovere il mouse. La forma dovrebbe muoversi con te. Questo aiuta a mettere tutto in ordine giusto anche dopo aver iniziato a disegnare la forma.

MAIUSC (senza forma esistente)

Prima di disegnare qualsiasi forma all'interno del livello, puoi tenere premuto il tasto MAIUSC per mantenere tutto perfetto. Cerchi perfetti, quadrati perfetti, linee rette perfette e persino linee angolate a 45 gradi perfette. Questo è molto simile a quello che abbiamo visto con lo strumento Marquee qualche settimana fa. Tenendo premuto MAIUSC manterrà tutto proporzionato e può sostituire selezionando il pulsante di opzione quadrato nelle opzioni di forma.

SHIFT (con forma esistente)

Quando hai già una forma nell'area di disegno, il tasto MAIUSC funziona in modo leggermente diverso. Se hai già una forma nell'area di disegno e anche selezionata nella tavolozza dei livelli, tenendo premuto il tasto MAIUSC ti permetterà di aggiungere dinamicamente alla forma esistente.

Tieni premuto SHIFT verso il basso e vedrai apparire un piccolo segno più (+) accanto al cursore. Aggiungi alla forma trascinando una nuova forma sulla forma esistente. Notate nello screenshot che ho squadrato la fine del nostro rettangolo arrotondato. Avrei potuto farlo in un paio di modi diversi, ma ciò comporterebbe l'aggiunta di molti altri passaggi.

Cosa faremo con qualcosa del genere? Crea un paio di forme in più usando lo strumento rettangolo e termina l'ultimo nello stesso modo in cui hai fatto il primo per creare un bel set di semplici pulsanti di navigazione:

ALT (con forma esistente)

Tenere premuto il tasto ALT con una forma esistente rimuoverà una porzione. Con una forma esistente nell'area di disegno e selezionata, tieni premuto il tasto ALT e apparirà il simbolo meno (-) accanto al cursore. Questo indica che stai per rimuovere una parte della forma. Nello screenshot ho preso la forma personalizzata della busta e rimosso quella sezione del rettangolo. Ora dobbiamo solo aggiungere del testo e abbiamo un pulsante email molto semplice per la nostra app!

T CTRL +

Questo è il modo più rapido ed efficace per ridimensionare una forma esistente. Assicurati di avere la forma selezionata nella tavolozza dei livelli e utilizza la scorciatoia da tastiera di CTRL + T. Dovresti vedere le maniglie sulla forma che ti permetteranno di ridimensionare secondo necessità. Semplice e veloce, funziona per tutti i livelli, non solo con le forme. Lo uso una tonnellata!


Imparare a usare lo strumento forma è solo l'inizio. Il vero trucco sta nell'imparare come applicare le forme di base in modi unici e interessanti. Puoi certamente usare queste forme per qualcosa di più dei semplici pulsanti!

Per stimolare la tua creatività, ecco alcuni esempi unici e creativi dello strumento forma in azione!

orologi

Dia Carta

Dropbox

Scatola del domino