Share
Il filtro offset è un ottimo strumento da utilizzare per creare un motivo ripetuto per uno sfondo di un sito web. Sfortunatamente, per noi, il filtro di offset funziona solo per un'immagine piatta, a un livello e non funziona in tutte le situazioni. Nel tutorial di oggi dimostreremo come creare un motivo ripetuto usando gli oggetti intelligenti e la tecnica nudging con i tasti freccia.
Le seguenti risorse sono state utilizzate durante la produzione di questo tutorial:
Prima di iniziare, iniziamo con alcuni principi di base del design del modello.
Qualunque cosa sia posizionata al centro si ripeterà facilmente. Non devi fare nulla con esso (1).
Gli oggetti posizionati sul bordo verranno tagliati (2a). Devi aggiungerlo al lato opposto (2b).
Gli oggetti posizionati sull'angolo verranno tagliati (3a). Dovrai aggiungerlo ad ogni altro angolo (3b).
Scarica Ornamenti floreali e aprilo in Illustrator. Seleziona uno degli oggetti e premi Cmd + C per copiare.
Crea un nuovo file. Stiamo per creare un modello di 256 x 240 pixel.
Crea un nuovo livello. Riempi con qualsiasi colore, fai clic con il tasto destro e scegli Converti in oggetto avanzato. Questo oggetto intelligente diventerà il nostro modello.
Fai clic su Immagine> Dimensioni della tela. Attiva Relativo e imposta Larghezza e Altezza al 200%. Ciò aumenterà le dimensioni della tela fino a 3 volte più grandi di quanto sarà il nostro modello.
Duplica il modello oggetto intelligente premendo Cmd + J, quindi riempi la tela con il motivo. A questo punto, avrai 9 oggetti intelligenti sulla tua tela. Questi 9 oggetti intelligenti sono stati creati dallo stesso genitore, modificando uno di essi cambierà l'altro 8. Ciò significa che saremo in grado di vedere le modifiche apportate al nostro modello di modifica in tempo reale.
Fare doppio clic su uno dei livelli miniatura degli oggetti intelligenti per modificarne il contenuto. Se trovi questa finestra di dialogo, fai clic su OK. L'oggetto smart verrà aperto come nuovo file in una nuova scheda. Questo è il file che metteremo gli oggetti per il nostro modello.
Fare clic su Finestra> Disponi> Virgola mobile in Windows per visualizzare entrambi i file contemporaneamente.
Nel file di pattern, incolla (Cmd + V) la forma vettoriale da Illustrator. Mettilo nel mezzo dell'immagine. Salva il file di pattern (Cmd + S) e automaticamente il grande file verrà aggiornato. Poiché l'oggetto si trova nel mezzo, il modello sembra a posto (Principi 1).
Torna a Illustrator, copia un'altra forma. In Photoshop incollare l'oggetto e metterlo sul bordo sinistro. Salva il file e puoi vedere nel file grande che manca una parte dell'oggetto.
Livello duplicato (Cmd + J). Dobbiamo metterlo dal lato opposto, giusto (Principi # 2). Ricorda che la larghezza del motivo è 256 px. Spingi questo livello di 256 px a destra. Ogni volta che si preme il tasto freccia, si spinge l'oggetto 1 px. Se si preme Maiusc + Freccia si spinge a 10 px. Quindi, premi Shift + Freccia destra per 25 volte, quindi Freccia destra per 6 volte. Premi Cmd + S per salvare il pattern e vedere come cambia il pattern.
Prendi un'altra forma da Illustrator. Questa volta lo mise sul bordo superiore. Salva il file e vedrai che manca la parte inferiore del pattern.
Usiamo ancora il principio n. 2. Livello duplicato (Cmd + J). Spingilo su 240 px verso il basso, ovvero premi il tasto freccia 24 volte. Salvare il file e vedere il modello funzionante.
Prendi un'altra forma da Illustrator. Mettilo nell'angolo in basso a destra. Salva il file e vedrai che manca del pezzo in alcune aree.
Per oggetto in angolo, dobbiamo mettere la sua coppia in ogni angolo (Principio # 3). Duplica il livello e spingilo su 240 px verso l'alto. Salva il file per vedere il risultato.
Duplicare il livello e spingerlo a 256 px a sinistra. Salva il file per vedere il risultato.
Ora l'ultimo pezzo. Duplica il livello e spingilo verso il basso di 240 px. Salva per vedere il risultato.
Riempi lo spazio vuoto con forme più piccole da Illustrator senza toccare il bordo. Salva per vedere il risultato.
Elimina il livello di sfondo per rendere trasparente questo motivo.
Fai clic su File> Salva per Web e dispositivi. Scegli Preset: PNG-24. Attiva la trasparenza.
Apri il file PNG che abbiamo appena creato. Fai clic su Modifica> Definisci modello.
Crea un nuovo file.
Aggiungi un gradiente radiale dal bianco al nero sullo sfondo.
Crea un nuovo livello. Fai clic su Modifica> Riempi. Scegli Usa: Modello e seleziona il modello che abbiamo appena creato.
Aggiungi livello di regolazione Tonalità / saturazione. Attiva Colorizza e sposta i cursori per aggiungere un po 'di colore.
Questo è tutto! Sono stati fatti. Puoi vedere l'immagine finale qui sotto. Spero ti sia piaciuto questo tutorial e ho imparato qualcosa di nuovo. Prova ad usare questa tecnica con altre forme o linee. Ti stupirai con il risultato.
Accentsconagua