Tutorial: Δημιουργία 5 λεπτών μοτίβων φόντου
Στον θαυμάσιο κόσμο του σχεδιασμού ιστοσελίδων, έχει γίνει η συνήθης πρακτική να δημιουργούνται σχέδια που χρησιμοποιούν υποδείγματα υποβάθρου που δεν τραβάνουν τόνο προσοχής, αλλά έχουν κάποια διακύμανση μέσα τους. Ακόμη και αν δεν δημιουργείτε σχέδια ιστοσελίδων, θα πρέπει να είναι καλή πρακτική να θέλετε να δημιουργήσετε σχέδια που είναι λεπτές, αλλά όμορφα και εύχρηστα για κάθε περίσταση.
Φυσικά, είναι εύκολο να βρείτε αυτούς τους τύπους σχεδίων online, οπότε το μόνο που έχετε να κάνετε είναι να τα αποθηκεύσετε και να τα χρησιμοποιήσετε, αλλά δεν θα επιθυμούσατε να μάθετε πώς να τα κάνετε από το μηδέν - για να προσθέσετε λίγο προσωπικότητα στον ιστό σας σχέδιο? Λοιπόν σήμερα έχουμε δημιουργήσει 5 σύντομα μαθήματα για να σας βοηθήσουμε να δημιουργήσετε πέντε διαφορετικούς τύπους λεπτών υποβάθρων.
Αυτά είναι tutorials του Photoshop που είναι καλύτερο για αρχάριους και ενδιάμεσους χρήστες - θα εξηγήσω πολλά από τα βήματα γρήγορα σαν να έχετε ήδη κάποια γνώση των συντομεύσεων του Photoshop και των σύντομων κωδίκων. Είτε έτσι είτε αλλιώς, ελπίζω ότι είστε σε θέση να ακολουθήσετε, να μάθετε κάτι που δεν γνωρίζατε πριν και να μάθετε πώς να φτιάχνετε πέντε λεπτά και απρόσκοπτα υποδείγματα φόντου.
Πρώτο μοτίβο
Για αυτό το πρώτο σχέδιο, ήθελα να μιμηθώ κάτι που ήταν λίγο grungy με λίγο υφή.
Βήμα 1.
Το πρώτο πράγμα που θέλετε να κάνετε είναι βέβαια να δημιουργήσετε το νέο σας έγγραφο. Αυτή τη φορά θα ξεκινήσουμε με ένα μέγεθος εγγράφου 100 pixels ανά 100 pixels.
Βήμα 2.
Αφού δημιουργήσετε το έγγραφό σας, θέλετε να επιλέξετε το χρώμα του φόντου σας. Μπορείτε να επιλέξετε από τα δείγματα ή να εμφανίσετε το παράθυρο διαλόγου "Επιλογή χρωμάτων". Ήθελα να πάω με ένα ωραίο σκούρο μπλε χρώμα αυτή τη φορά.
Βήμα 3.
Το πρώτο πράγμα που θα κάνουμε για να δημιουργήσουμε το ιστορικό μας είναι να προσθέσουμε κάποιο θόρυβο. Μεταβείτε στο στοιχείο Φίλτρο> Θόρυβος> Προσθήκη θορύβου για να ανοίξετε αυτό το παράθυρο διαλόγου. Αλλάξτε το ποσό (θόρυβος) στο 3%, με διανομή Guassian και βεβαιωθείτε ότι έχει επιλεγεί το μονοχρωματικό πλαίσιο.
Βήμα 4.
Στη συνέχεια, θα εφαρμόσουμε το φίλτρο που είναι απαραίτητο για τη δημιουργία του υπολοίπου του ματ grunge. Μεταβείτε στα "Φίλτρα"> Εφέ βούρτσας> "Ακόνες". Το παράθυρο διαλόγου Φίλτρο φίλτρου θα εμφανιστεί και θα εμφανιστεί έτσι. Θέλετε να παίξετε με τις ρυθμίσεις μέχρι να βρείτε κάτι που σας αρέσει. Οι ρυθμίσεις που έχω χρησιμοποιήσει: Πλάτος ακμής 6, Φωτεινότητα άκρων 18 και Ρύθμιση γραμμής 6.
Βήμα 5.
Για να γίνει αυτό το σχέδιο απρόσκοπτο, αυτό που πρόκειται να κάνουμε είναι να τυλίξουμε τα εικονοστοιχεία γύρω από τις άκρες. Με τη μετάβαση στο στοιχείο Φίλτρο> Άλλο> Μετατόπιση, εμφανίζουμε ένα παράθυρο διαλόγου που είναι έτοιμο να μας βοηθήσει να μετακινήσουμε τα εικονοστοιχεία. Αυτό που θέλετε να κάνετε είναι να χρησιμοποιήσετε ένα ποσό που είναι το ήμισυ του μεγέθους του μήκους και / ή του πλάτους σας. Το μήκος και το πλάτος μας είναι 100px το καθένα, οπότε θέλουμε να το τυλίξουμε γύρω στα 50 pixels έτσι.
Βήμα 6.
Όπως μπορείτε να δείτε στο Βήμα 5, όταν επιλέγετε να Offset pixels σας, μπορείτε πραγματικά να δείτε πού τα εικονοστοιχεία ξεκινούν και σταματούν. Για να καθαρίσετε αυτό το θέμα, θέλετε να τραβήξετε την βούρτσα θεραπείας (J) στην παλέτα σας, Alt + αριστερά Κάντε κλικ σε ένα σημείο στο παρασκήνιο σας και ζωγραφίστε πάνω του. Αφού το εξομαλύνετε με την βούρτσα Healing, θα πρέπει να μοιάζει πολύ με την παραπάνω εικόνα.
Βήμα 7.
Το τελευταίο βήμα για τη δημιουργία ενός σχεδίου είναι να ορίσετε το μοτίβο σας. Μεταβείτε στην επιλογή Επεξεργασία> Ορισμός μοτίβου και θα εμφανιστεί ένα παράθυρο διαλόγου ζητώντας σας να ονομάσετε το μοτίβο σας. Ονομάστε ό, τι θέλετε. Για να ανακτήσετε το πρότυπό σας, τραβήξτε τον κάδο χρωμάτων (G) και βεβαιωθείτε ότι είναι σε κατάσταση σχεδίασης. Το νεότερο μοτίβο σας πιθανότατα θα είναι το τελευταίο μοτίβο. Επιλέξτε το και γεμίστε τον καμβά σας με το μοτίβο.
Τελική εικόνα
Δεύτερο μοτίβο
Αυτό το δεύτερο μοτίβο μας επιτρέπει να χρησιμοποιήσουμε μερικά γεωμετρικά στοιχεία με μια λεπτή γεύση grunge.
Βήμα 1.
Και πάλι, φυσικά, θα δημιουργήσουμε το νέο μας έγγραφο ακολουθώντας τα βήματα στο προηγούμενο σύντομο φροντιστήριο. Χρησιμοποιούμε επίσης το ίδιο μέγεθος καμβά 100px με 100px. Αυτή τη φορά θα επιλέξουμε δύο διαφορετικά χρώματα γκρι. Για το πρώτο χρώμα, επιλέγουμε ένα ανοιχτό γκρι χρώμα (# d7d7d7). Γεμίστε τον καμβά σας με το πιο ανοιχτόχρωμο χρώμα.
Για το δεύτερο χρώμα επιλέγουμε ένα πιο σκούρο γκρι (# c2c1c1). Αργότερα, θα χρησιμοποιήσουμε αυτό το χρώμα για γραμμές.
Βήμα 2.
Επιλέξτε το γραμμικό εργαλείο (U), βεβαιωθείτε ότι βρίσκεστε σε λειτουργία Shape και αλλάξτε το βάρος γραμμής σε περίπου 2px.
Βήμα 3.
Δημιουργήστε ένα νέο επίπεδο (Ctrl / Cmd + Shift + N). Κάντε αριστερό κλικ και σύρετε το εργαλείο γραμμής σας διαγώνια από τη γωνία στη γωνία (κρατήστε πατημένο το Shift για να κάνετε το φως σας ακριβές).
Βήμα 4.
Δημιουργήστε ένα άλλο νέο επίπεδο. Κάντε το ίδιο με το εργαλείο γραμμής για την άλλη πλευρά. Μόλις τελειώσω τις γραμμές μου και τις έβαλα σωστά τοποθετημένες, το βρήκα πιο εύκολο να συγχωνεύσω αυτά τα δύο στρώματα. Εάν βρίσκεστε σε λειτουργία Shape, θα πρέπει να είναι τόσο εύκολη όσο να επισημάνετε το πιο πρόσφατο (πάνω) επίπεδο και κάνοντας κλικ στο Ctrl / Cmd + E για να το συγχωνεύσετε με το επίπεδο κάτω από αυτό.
Βήμα 5.
Για να διευκολύνετε τα πράγματα, μου αρέσει να χρησιμοποιώ την επιλογή Trim για να αφαιρέσω όλα τα επιπλέον πράγματα που δεν μπορείτε να δείτε. Για να το κάνετε αυτό, πηγαίνετε στο Image> Trim και συνήθως θα πρέπει να μπορείτε να πιέσετε το OK και όλα τα οποία δεν μπορείτε να δείτε διαγράφονται.
Βήμα 6.
Με τις γραμμές που συγχωνεύσατε, θέλετε να τις μειώσετε, ώστε να υπάρχει λίγος χώρος μεταξύ του Χ και των άκρων. Για να γίνει αυτό, θέλετε να πιέσετε το Control / Cmd + T και να κρατήσετε τα πλήκτρα Shift και Alt για να διατηρήσετε τις αναλογίες και να το μειώσετε από το κέντρο. Βαθμολογήστε το όπως θέλετε.
Βήμα 7.
Ήθελα να κάνω μια εμφάνιση 'Χ' λίγο ανάγλυφη, έτσι έχω αντιγράψει το στρώμα (Control + J) και αποφάσισε να το κάνει πιο ανοιχτό πηγαίνοντας στο Image> Image Adjustments> Brightness / Contrast. Έστρεψα τη Φωτεινότητα μου σε όλη τη διαδρομή μέχρι που ήταν ωραίο ανοιχτό γκρι / λευκό χρώμα. Όταν έχετε ένα χρώμα που εγκρίνετε, πατήστε OK.
Βήμα 8.
Στη συνέχεια, θέλετε να προσαρμόσετε το ελαφρύτερο σας στρώμα όποιο τρόπο θέλετε. Πιάσε το εργαλείο βέλους (V) και σπρώξτε τα στρώματα γύρω σας κάνοντας κλικ στα κουμπιά βέλους. Κινούσα επίσης τα στρώματα μου για να αλλάξω την εμφάνιση. Παίξτε με αυτό μέχρι να πάρετε κάτι που σας αρέσει. (Κατέληξα να βάζω το ελαφρύτερο στρώμα "Χ" κάτω από το άλλο και να το βγάλω μόνο μια φορά).
Βήμα 9.
Αφού τελειώσετε να υπολογίζετε πώς θέλετε να τοποθετήσετε το ελαφρύτερο και πιο σκούρο 'Χ', προσθέστε κάποιο θόρυβο στο γκρίζο φόντο. Είναι πάρα πολύ λεπτές, ώστε να μεταβείτε στο Φίλτρο> Θόρυβος> Προσθήκη θορύβου και να προσθέσετε μόνο 1% θορύβου. Διατηρήστε το Gaussian διανομής και βεβαιωθείτε ότι έχει επιλεγεί το μονοχρωματικό πλαίσιο.
Βήμα 10.
Μόλις το κάνετε αυτό, θα θέλετε να αλλάξετε το μέγεθος της εικόνας σας. Μεταβείτε στην επιλογή Ρυθμίσεις> Μέγεθος εικόνας και μικρύνετε το μέγεθος όσο θέλετε. Έβαλα το δικό μου με 75px από 75px. Και πάλι, θα θελήσετε να ορίσετε το μοτίβο σας μεταβαίνοντας στην επιλογή Επεξεργασία> Ορισμός μοτίβου, ονοματοδοτώντας το σχέδιό σας και πιέζοντας OK. Παρακάτω είναι αυτό που θα ήθελε η τελική εικόνα.
Τελική εικόνα
Τρίτο μοτίβο
Αυτό το μοτίβο εξακολουθεί να είναι κάπως γεωμετρικό, με λιγότερη αισθητή διακύμανση.
Βήμα 1.
Για αυτό το μοτίβο, ξεκίνησα με ένα μεγαλύτερο μέγεθος καμβά 150px με 150px γιατί θα είμαστε λίγο πιο ακριβείς εδώ. Ξεκινήστε επιλέγοντας ένα πραγματικά σκούρο γκρι για να γεμίσετε τον καμβά σας.
Βήμα 2.
Όπως και στο προηγούμενο πρότυπο, πρόκειται να χρησιμοποιήσουμε το εργαλείο γραμμής (U). Επιλέξτε ένα ελαφρύτερο γκρι χρώμα για να δημιουργήσετε τις γραμμές σας. Δεν χρειάζεται να είναι τέλεια. Κάτι σαν τα παραπάνω θα κάνει καλά.
Βήμα 3.
Στη συνέχεια θέλετε να πάρετε το Brush Tool (B) και να πάρετε μια μαλακή βούρτσα για να βάψετε μια μαλακή βουρτσισμένη μεγαλύτερη γραμμή πάνω από τη δεύτερη ανοιχτό γκρι γραμμή. Χρησιμοποίησα σκούρο χρώμα εδώ (μαύρο) για τη γραμμή μου. Μπορείτε να πειραματιστείτε με διαφορετικούς τύπους χρωμάτων.
Βήμα 4.
Τώρα πρόκειται να συρρικνωθεί το μέγεθος αυτού του μοτίβου πηγαίνοντας στο Εικόνα> Μέγεθος εικόνας. Το άλλαξα σε 10px από 10px. Μόλις αλλάξετε το μέγεθος, θέλετε να μεταβείτε στην επιλογή Επεξεργασία> Ορισμός μοτίβου> ονομάστε το μοτίβο σας και, στη συνέχεια, κάντε κλικ στο OK.
Βήμα 5.
Δημιουργήστε ένα νέο έγγραφο - αυτή τη φορά έχω επιλέξει το μέγεθος 615px σε 450px, αν και δική σας δεν πρέπει να είναι τόσο μεγάλη. Οτιδήποτε μεγαλύτερο από 200px σε κάθε πλευρά θα πρέπει να λειτουργήσει. Πιάσε τον κάδο χρωμάτων (G), βεβαιωθείτε ότι είναι σε κατάσταση λειτουργίας μοτίβου (θα υπάρχει ένα αναπτυσσόμενο μενού με τις επιλογές «προσκήνιο» και «μοτίβο») και θα αρπάξετε το μοτίβο που κάνατε. Γεμίστε τον καμβά σας με αυτό το μοτίβο όπως την παραπάνω εικόνα.
Βήμα 6.
Τώρα θα γίνει κανονικά, αλλά θέλουμε να κάνουμε κάποιες αλλαγές στην εμφάνιση των γραμμών. Μεταβείτε στο στοιχείο Φίλτρο> Εφέ βούρτσας> Γωνιακές διαδρομές για να πάρετε το αποτέλεσμα που πηγαίνουμε. Και πάλι, σας ενθαρρύνω να παίζετε μέχρι να βρείτε κάτι που σας αρέσει, αλλά εδώ είναι οι ρυθμίσεις που χρησιμοποίησα: Κατεύθυνση Υπόλοιπο 73, Μήκος Stroke 6 και Sharpness of 4. Πατήστε OK για να υποβάλετε τις αλλαγές.
Βήμα 7.
Αυτό είναι το τελικό αποτέλεσμα, αλλά για να το καταστήσω απρόσκοπτο, άρπαξα το Crop Tool μου (C) και επέλεξα μια τετράγωνη περιοχή (Shift + αριστερό κλικ) που μου φαινόταν αρκετά συνεπής. Είναι εύκολο να βγάζεις τα πράγματα όπως αυτό-απλά θέλεις να σιγουρευτείς ότι η αριστερή σου πλευρά αρχίζει εκεί που τελειώνει η δεξιά σου και η κορυφή σου ξεκινά όπου τελειώνει το κάτω μέρος σου. Και πάλι, όταν βρείτε μια κατάλληλη περιοχή, Επεξεργασία> Ορισμός μοτίβου και δοκιμάστε την.
Τελική εικόνα
Τέταρτο μοτίβο
Περισσότερα λίγο βρωμιά με μια σταθερή επαναληπτική αλλά λεπτή αξία.
Βήμα 1.
Για το τέταρτο μοντέλο μας πρόκειται να χρησιμοποιήσουμε έναν άλλο τύπο γραμμής βάσης. Και πάλι ξεκινάμε με ένα νέο έγγραφο με μέγεθος 100px ανά 100px. Για το χρώμα, έχω ένα κανονικό λευκό φόντο και επέλεξα ένα πολύ ανοιχτό γκρι για το χρώμα της γραμμής. Πάμε να πιάσουμε το γραμμικό εργαλείο μας (U) και να σχεδιάσουμε μια οριζόντια γραμμή στην κορυφή, καθώς και μια γραμμή στη μέση.
Βήμα 2.
Τώρα αυτό θα είναι λίγο πιο «βρώμικο» από το υπόλοιπο, έτσι θέλουμε να προσθέσουμε μια δέσμη θορύβου σε αυτό. Με το επιλεγμένο επίπεδο λευκό φόντο, μεταβείτε στο στοιχείο Φίλτρο> Θόρυβος> Προσθήκη θορύβου και αλλάξτε το ποσό σε 15%, Διανομή σε Gaussian και επιλέξτε το πλαίσιο Μονοχρωματικό.
Βήμα 3.
Για αυτό, πάλι θα κάνουμε το μέγεθος μικρότερο, οπότε θα πάμε στο Image> Image Size και γι 'αυτό, άλλαξα το μέγεθος στα 15 pixels κατά 15 pixels. Μόλις το κάνετε, δημιουργήστε το μοτίβο σας με την επιλογή Επεξεργασία> Ορισμός μοτίβου> ονοματοποίηση του σχεδίου σας και υποβολή των αλλαγών. Χρησιμοποιήστε όσο θέλετε! Λάβετε υπόψη, ωστόσο, εάν θέλετε το μοτίβο σας να φαίνεται λιγότερο επαναλαμβανόμενο, δοκιμάστε να αυξήσετε το μέγεθος του καμβά, ώστε να μπορείτε να αυξήσετε την παραλλαγή σας.
Τελική εικόνα
Πέμπτο μοτίβο
Για αυτό το τελευταίο μοτίβο, ήθελα να επιχειρήσω κάτι σκοτεινό, με λίγη υφή.
Βήμα 1.
Για άλλη μια φορά, έχω δημιουργήσει ένα νέο έγγραφο με μέγεθος καμβά 100 pixels ανά 100 pixels. Για αυτό το τελευταίο μοτίβο, θα επιλέξουμε ένα πολύ σκούρο γκρι χρώμα για το φόντο μας.
Βήμα 2.
Για να μεταβείτε δεξιά, θα προσθέσουμε κάποιο πολύ χρήσιμο θόρυβο, πηγαίνοντας στο στοιχείο Φίλτρα> Θόρυβος> Προσθήκη θορύβου: Ποσό 5%, Ομοιόμορφη κατανομή, με δυνατότητα μονοχρωματικής λειτουργίας.
Βήμα 3.
Για να δημιουργήσετε το επιθυμητό αποτέλεσμα εδώ, πηγαίνουμε στο φίλτρο> Σκίτσο> μοτίβο ημίτονο. Νιώστε ελεύθεροι να παίζετε εδώ, αλλά οι τιμές που χρησιμοποίησα ήταν: Μέγεθος 1, Αντίθεση 0, Τύπος κουκκίδας.
Βήμα 4.
Χρησιμοποιήσαμε προηγουμένως αυτή τη δυνατότητα offset για να μας βοηθήσετε να δημιουργήσουμε ένα απλό πρότυπο. Θα κάνουμε και πάλι το ίδιο πράγμα. Μεταβείτε στο στοιχείο Φίλτρο> Άλλα> Απόκλιση και εισαγάγετε το μισό της τιμής ύψους και πλάτους. Βεβαιωθείτε ότι οι Μη προσδιορισμένες περιοχές σας έχουν οριστεί για Περιτύλιξη και πατήστε OK. Μόλις συμβεί αυτό, θα θέλετε να χρησιμοποιήσετε ξανά το Βούρτσα Θεραπείας (J) για να προσπαθήσετε να εξομαλύνετε τις περιοχές που είναι λιγότερο απρόσκοπτες. Μόλις το αποκτήσετε σε ένα μέρος που σας αρέσει, μεταβείτε στην επιλογή Επεξεργασία> Ορισμός μοτίβου> ονομάστε το μοτίβο σας, πατήστε OK και χρησιμοποιήστε το νέο μοτίβο.
Τελική εικόνα
Θυμήσου…
Όταν δημιουργείτε αυτά τα μοτίβα, αισθανθείτε ελεύθερος να πειραματιστείτε ώστε να βρείτε κάτι που σας αρέσει και αυτό είναι μοναδικό. Όπως μπορείτε να δείτε, υπάρχουν μερικές οικογένειες φίλτρων και φίλτρων που πραγματικά μπορούν να σας βοηθήσουν στη δημιουργία μοναδικών απαλά φόντο για το επόμενο έργο σχεδίασης ιστοσελίδων. Επίσης, εάν θέλετε περισσότερες παραλλαγές στα μοτίβα σας, χρησιμοποιήστε μεγαλύτερα μεγέθη καμβά και πάλι, μην φοβάστε να εξερευνήσετε με διαφορετικά πράγματα.
Ποιες είναι μερικές τεχνικές που θέλετε να χρησιμοποιήσετε για να δημιουργήσετε το δικό σας λεπτό υπόβαθρο;