Δημιουργώντας ένα απλό template στο photoshop [Part 1]

Βοήθεια και προτάσεις για το καλύτερο πρόγραμμα επεξεργασίας εικόνας, και γραφικών.

Συντονιστές: Super-Moderators, Graphics Moderators

Απάντηση
Άβαταρ μέλους
ArchangelX
Honorary Member
Δημοσιεύσεις: 2430
Εγγραφή: 24 Μαρ 2004 13:33
Τοποθεσία: 7ος Ουρανός
Επικοινωνία:

Δημιουργώντας ένα απλό template στο photoshop [Part 1]

Δημοσίευση από ArchangelX » 09 Φεβ 2008 02:35

Η δημιουργία μία ιστοσελίδας, είναι εύκολη. Το μόνο που χρειάζεται είναι έμπνευση, καθαρό μυαλό, να τηρούμε κάποια στάνταρ, και να μην το παρακάνουμε. Το να έχουμε προσχεδιάσει την σελίδα στο μυαλό μας αφήνοντας πρώτα να ωριμάσει σαν σκέψη για να την αποτυπώσουμε αργότερα στο Photoshop θα ήταν το ιδανικό.

Αυτός ο κύκλος βοηθημάτων είναι για αυτούς που έχουν τις βασικές γνώσεις του Photoshop και θεωρούν την δημιουργία ιστοσελίδας βουνό. Τα στάνταρ που πρέπει να τηρούν αναγράφονται στα βοηθήματα του Freestuff και όσο για τις τεχνικές που χρησιμοποιούνται θα κρατηθούν σε όσο πιο απλά επίπεδα γίνεται, αλλα θα το δυσκολέψω και θα εξηγώ όσο μπορώ τις κινήσεις μου για να μην σας δώσω μασημένη τροφή.


Δημιουργώντας το background της σελίδα και οριοθετώντας τον χώρο των περιεχομένων μας.

Ξεκινώντας, θα δημιουργήσουμε το φόντο της σελίδας, ή τουλάχιστον της σελίδας που φαντάστηκα εγώ.

Τα κόλπα που μπορούμε να χρησιμοποιήσουμε για το background μίας σελίδας, στην περίπτωση που αυτό δεν είναι ένα απλό χρώμα ή ένα έτοιμο pattern είναι αρκετά. Μία σελίδα της οποίας το background είναι 2χρωμο δίνει την αίσθηση βάθους στην σελίδα κάνοντας τα περιεχόμενα να ξεχωρίζουν. Προσοχή να μην το παρακάνετε με την διχρωμία γιατι το X πάνω δεξιά δεν αργεί να πατηθεί από τον επισκέπτη. Φροντίστε να επιλέγετε χρώματα τα οποία δεν θα κουράζουν το μάτι τραβώντας το απο τα περιεχόμενα. Στην δική μου περίπτωση, γι αυτό το template, επέλεξα σαν αρχικό το #292929 και σαν τελικό το #3a3a3a.

Ξεκινάμε δημιουργώντας ένα καινούργιο layer. Για να δημιουργήσουμε αυτή την ομοιόμορφη διχρωμία, αφού ορίσουμε το foreground και το background color επιλέγουμε το gradient tool και πιάνοντας το πάνω άκρο της σελίδας, κρατάμε πατημένο το Shift και το αριστερό κλικ και τραβάμε την γραμμή μέχρι το τέλος του γραφικού όπου και αφήνουμε το αριστερό κλικ, χωρίς να αφήσουμε το Shift. Ο λόγος για τον οποίο πατάμε το shift είναι οτι για να μας βγει το background σωστά στο τέλος ώστε να μπορέσουμε να το κόψουμε, θα πρέπει να είναι μία τέλεια ευθεία, παράλληλη των πλευρών του γραφικού. Το shift μας δίνει αυτή την δυνατότητα. Κρατώντας το, μπορούμε να τραβήξουμε ευθείες σε 0, 45, 90, 135 και 180 μοίρες ακριβώς.

Εικόνα
Απ ότι βλέπετε, ο κέρσορας του ποντικιού μου τραβήχτηκε λίγο προς τα δεξιά στο τέλος αλλα δεν είχε σημασία. Το shift που κρατούσα πατημένο φρόντισε για την τέλεια ευθεία. (και ο λόγος για τον οποίο ο κέρσορας κινήθηκε ήταν ότι επειδή είχα το ένα χέρι στο shift και το άλλο στο ποντίκι, έπρεπε να πατήσω το printscreen με την μύτη... είναι και περασμένη η ώρα...)


Τώρα, στο template που σκέφτηκα, υπήρχε κάτι παραπάνω απο διχρωμία. Θέλησα να προσθέσω noise. Αυτό το έκανα πηγαίνοντας Filters > Noise > Add Noise. Σαν τιμές έδωσα Uniform και 2,45%. Κράτησα τα επίπεδα χαμηλά διότι όπως προανέφερα, όσο πιο σύνθετο είναι το background της σελίδας, τόσο πιο δύσκολο έως αδύνατο είναι το κόψιμο του ώστε να προσαρμοστεί στην σελίδα.

Εικόνα

Με το background λίγο πολύ τελειώσαμε. Η επόμενη εργασία μας θα είναι να οριοθετήσουμε τον χώρο των περιεχομένων μας. Επιλέγουμε το Rectangle Marquee Tool και τραβάμε ένα τετράγωνο απο την επάνω άκρη της επιφάνειας μέχρι την κάτω αφήνοντας 2 μικρά κενά στο αριστερό και το δεξί μέρος. Κατα προσέγγιση, φροντίστε τα κενά στο αριστερό και το δεξί μέρος να είναι σχεδόν ίδια σε width.

Εικόνα

Πατάμε το D για να δώσουμε τις αρχικές τιμές στα colors μας (μάυρο και άσπρο) όπου το άσπρο είναι το background color. Δημιουργούμε ένα καινούργιο layer και το γεμίζουμε με το άσπρο χρώμα πατώντας Ctrl-Backspace (υπάρχουν και αλλοι συνδυασμοί πλήκτρων γεμίσματος αλλα αυτός είναι ο αγαπημένος μου). Επειτα, πατάμε Ctrl-D για να αποεπιλέξουμε το άσπρο τετράγωνο που δημιουργήσαμε και κάνουμε διπλό κλικ πάνω του στα layer στα δεξιά του χώρου εργασίας μας έτσι ώστε να μας εμφανιστούν τα special effects.

Ξεκινάμε απο το τέλος. Πάμε στο stroke και αφού ορίσουμε σαν size το 1 pixel, ορίζουμε σαν χρώμα του stroke το άσπρο. Το stroke δημιουργεί ένα περίγραμμα γύρω απο το γραφικό μας αλλα εφόσον το επάνω και το κάτω μέρος του είναι εκτός της επιφάνειας που δουλεύουμε, δεν μας ενδιαφέρει ;).

Εικόνα

Το επόμενο εφέ που θα ορίσουμε είναι το Drop Shadow. Το επιλέγουμε και στις ρυθμίσεις του, δίνουμε 100% στο opacity και 90 μοίρες στην κατεύθυνση του. Με αυτόν τον τρόπο, θα σχηματίσει σκιά στα αριστερά και δεξιά του άσπρου τετραγώνου μας. Την ίδια κίνηση μπορούμε να κάνουμε και με το outer glow, δίνοντας μαύρο χρώμα στο εφέ ;)

Εικόνα

Τέλος, πηγαίνουμε στα Blending Options τα οποία είναι στην κορυφή των εφέ και είναι οι γενικές ρυθμίσεις. Εδώ θα παίξουμε με το Opacity και το Fill Opacity οπου το Fill opacity αφορά μόνο το χρώμα γεμίσματος ενώ το Opacity αφορά τα πάντα. Παίζουμε με αυτές τις 2 τιμές με σκοπό το να κάνουμε ημιδιαφανές το τετράγωνο μας αλλα να μην σβήσουμε τελείως τα εφέ του. Θεώρησα οτι οι κατάλληλες τιμές είναι 38% για το opacity και 23% για το fill opacity ξεκινώντας να πειράζω το δεύτερο.

Εικόνα

Λίγο πολύ αυτό ήταν. Δημιουργήσαμε το background όπως και το τμήμα πάνω στο οποίο θα πέσουν τα περιεχόμενα μας. Το τελευταίο βήμα είναι να σημαδέψουμε με χάρακα τις 2 άκρες του οριοθετημένου μας χώρου για να μας ευκολύνει την ζωή αργότερα όταν παίζουμε με το γέμισμα. Για αρχή πάμε στα layer στα δεξιά, και κρατώντας πατημένο το Ctrl κάνουμε αριστερό κλικ στο layer του τετραγώνου μας. Θα παρατηρήσουμε οτι το τετράγωνο, "επιλέγετε" δημιουργώντας το διακεκομμένο ασπρόμαυρο περίγραμμα που αναβοσβήνει. Για να εμφανίσουμε τον χάρακα, πατάμε Ctrl-R και όταν εμφανιστεί, πάμε το ποντίκι στην κάθετη μέτρηση, πατάμε αριστερό κλικ και το κρατάμε πατημένο, και σέρνουμε τον κέρσορα μας το οποίο έχει πάρει τον κάθετο χάρακα μέχρι το τετράγωνο μας. Παρατηρήστε οτι με το που φτάσει λίγο κοντά, ο χάρακας θα κολήσει στην επιλογή μας. Γι αυτό ευθύνεται το Snap το οποίο είναι επιλεγμένο σαν προεπιλογή απο το μενού View > Snap ή αλλιώς Shift+Ctrl+; .

Εικόνα


Επόμενο στάδιο : Header
Εικόνα

Άβαταρ μέλους
e-times
Graphics Moderator
Δημοσιεύσεις: 1555
Εγγραφή: 13 Φεβ 2003 01:41
Τοποθεσία: Πειραιάς

Δημιουργώντας ένα απλό template στο photoshop [Part 1]

Δημοσίευση από e-times » 14 Απρ 2008 11:09

Πολυ καλο και επεξηγηματικο βοηθημα.
Περιμενουμε και το επομενο part, ArchangelX, μπραβο.
Εικόνα

Good News For The Smokers, Non-Smokers Die Too

Απάντηση

Επιστροφή στο “Adobe Photoshop, illustrator”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες