Ένα παράδειγμα χρήσης της CSS3, για το πώς δημιουργούμε divs με καμπύλες γωνίες και διχρωμία.

Live Demo / Download Files

Το template αυτό μπορείτε να το κατεβάσετε έτοιμο ή αν θέλετε να το δημιουργήσετε μόνοι σας μέσα από το βοήθημα που βρίσκεται στην παραπάνω σελίδα.

Τι θα χρειαστούμε:

Το Notepad των Windows
Έναν οποιονδήποτε Web Browser (εκτός του ΙΕ 6 )
Τα αρχεία των εικόνων που θα χρησιμοποιηθούν μπορείτε να τα κατεβάσετε από ΕΔΩ

Η κατασκευή αυτή έχει καθαρά εκπαιδευτικό σκοπό και δεν είναι δυνατή η χρήση της για προσωπικούς ή επαγγελματικούς λόγους χωρίς την άδεια του σχεδιαστή Waheed Akhtar. Ο κώδικας που θα δοθεί μπορεί να χρησιμοποιηθεί ελεύθερα. Η εμφάνιση έχει ελεγχθεί στους Web Browsers Internet Explorer 7, 8, Opera 10.10, Firefox 3.6, Safari 4.0.4. Google Chrome 4.0.2

Έναρξη

1. Πρώτα απ' όλα θα δημιουργήσουμε ένα φάκελο στην επιφάνεια εργασίας ή όπου αλλού θέλουμε με όνομα page.
2. Στη συνέχεια αφού έχουμε κατεβάσει τα απαραίτητα αρχεία εικόνων που θα χρησιμοποιηθούν αφού τα αποσυμπιέσουμε θα τα τοποθετήσουμε μέσα σε ένα φάκελο με όνομα images που θα βρίσκεται μέσα στο φάκελο page.

3. Ανοίγουμε το Notepad των Windows και αντιγράφουμε τον παρακάτω κώδικα.

Το αρχείο αυτό θα το αποθηκεύσουμε μέσα στο φάκελο page με όνομα index.html όπως βλέπουμε στην παρακάτω εικόνα.

4. Με το Notepad δημιουργούμε ένα ακόμα αρχείο και το αποθηκεύουμε στο φάκελο page με όνομα layout.css.
5. Στο αρχείο index.html εισάγουμε την παρακάτω γραμμή κάτω από τη γραμμή <title>Untitled Document</title>

Με αυτό τον τρόπο συνδέουμε το αρχείο Css με το αρχείο Html
6. Ας αλλάξουμε και το αντιαισθητικό <title>Untitled Document</title> σε

Μέχρι τώρα έχουμε λοιπόν:

Ένα φάκελο page που περιέχει ένα φάκελο με όνομα images, ένα αρχείο με όνομα index.html και ένα αρχείο με όνομα layout.css
Το φάκελο images που περιέχει τις εικόνες που κατεβάσαμε.
Τα συνδεδεμένα αρχεία index.html και layout.css
Το βασικό σκελετό html μέσα στο index.html

Αύριο θα δημιουργήσουμε το βασικό σκελετό της ιστοσελίδας και την περιοχή του Header

jQuery λειτουργικότητα!!!

Το πρώτο πράγμα που θα κάνουμε εδώ είναι να δημιουργήσουμε ένα αρχείο με jQuery κώδικα και αυτό θα ελέγχει:

1)Εάν φορτώθηκε η σελίδα μας.

2)Τι θα συμβεί εάν πατήσουμε το κουμπί του slider.

3)Tι θα συμβεί εάν πατήσουμε το το link “close”.

4.)Τι θα συμβεί και πώς θα ελέγχουμε το περιεχόμενο της div που θα ανοίγει ανάλογα με το εικονίδιο που πατάμε.

Στον φάκελο “js” που προαναφέραμε αποθηκεύουμε ένα αρχείο jQuery-το ονομάζουμε “hideDiv.js“..Αφού δημιουργήσουμε το αρχείο αυτό θα το καλέσουμε και στο head της σελίδας μας,εννοείται!Αλλιώς δεν θα τρέχει ο κώδικας.Επίσης στο head της σελίδας μας θα καλέσουμε το αρχείο της jQuery βιβλιοθήκης το οποίο θα το τοποθετήσουμε στον ίδιο φάκελο και αυτό.Εάν είστε εντελώς αρχάριοι από την jQuery δείτε αυτό το jQuery tutorial.

Ας αρχίσουμε λοιπόν με το αρχείο μας “hideDiv.js“.
1.)Έλεγχος για τη φόρτωση όλων των στοιχείων της σελίδας μας..
 

2.)Ας ελέγξουμε λίγο το κουμπί μας που ελέγχει το slider. Aλλά πρώτα ας κρύψουμε το panel μας.Στο css αρχείο μέσα στο “#socializeContainer” προσθέστε μία γραμμή κώδικα ακόμα πριν το ‘}’.Την παρακάτω γραμμή:
 

Το ίδιο ακριβώς κάνουμε και στην κλάση “.content” ώστε να μην φαίνονται οι κρυφές divs.

Έτσι όταν δούμε τι σελίδα μας και πάλι ,θα φαίνεται μόνο το κουμπί του panel μας και όχι ολόκληρο το panel.Στην συνέχεια στο αρχείο “hideDiv.js” προσθέστε τον κώδικα ώστε το αρχείο μας να είναι το εξής:
 

Με την προσθήκη του παραπάνω κώδικα ελέγχουμε το εάν πατηθεί το κουμπί μας -το οποίο βρίσκεται σε div με class handler-Γραμμή 2.Εάν πατηθεί το κουμπί μας το socializeContainer μας -Γραμμή 3-θα ξετυλίγεται ή θα τυλίγεται με ταχύτητα 1 sec το πλήρες άνοιγμα και 1 sec το πλήρες κλείσιμο.

3.)Ας κάνουμε κάτι ποιο tricky εδώ.Θα ελέγχουμε πιο socialIcon πατάμε και ανάλογα θα εμφανίζουμε την κρυφή μας div με τα ανάλογα περιεχόμενα.Όταν για παράδειγμα έχουμε πατήσει το rss εικονίδιο και εν συνεχεία πατάμε το twitter θα γλυστράει προς τα πάνω η κρυφή div και εν συνεχεία θα κατεβαίνει και πάλι κάτω με τα νέα περιεχόμενα μας…
Ας δούμε τον κώδικα που θα προσθέσουμε στο αρχείο “hideDiv.js” και θα εξηγήσουμε !
 

Γραμμή 1:Εδώ ελέγχουμε εάν πατηθεί κάτι που έχει κλάση “socialIcons” Δηλαδή μία από τις divs που περιέχει ένα από τα εικονίδια μας!!Εάν πατηθεί θα εκτελεστούν οι γραμμές 2-5.

Γραμμή 2:Αυτή η γραμμή κάνει slideUp ,δηλαδή “ανεβάζει προς τα πάνω” το στοιχείο που έχει class = “content”.Αυτή η κλάση είναι η κλάση που εφαρμόζουμε στις 4 div που είναι κρυφές..

Γραμμή 4-5:Εδώ παίζεται όλο το παιχνίδι..Πατώντας εμείς πάνω σε ένα εικονίδιο μας δίνεται η δυνατότητα με την jQuery να παίρνουμε την τιμή από κάποιο attribute(title,id κλπ) του στοιχείου αυτού.Εδώ παίρνουμε τον τίτλο του στοιχείου που περιέχει το εικονίδιο αυτό.Δηλαδή τον τίτλο της div που το περιέχει.Στο παράδειγμά μας όταν πατάμε σε ένα εικονίδιο τότε παίρνουμε τον τίτλο του δηλαδή.Το (this) αναφέρεται στη div που έχει σαν background το εικονίδιο μας-ουσιαστικά το εικονίδιο που πατάμε..Ας θυμηθούμε λίγο τον html κώδικα για τα εικονίδια…
 

Παρατηρείτε ότι κάθε div από τις παραπάνω έχει ένα τίτλο;O τίτλος αυτός δεν είναι τυχαίος.Ο τίτλος “rssDiv” είναι ίδιος με το id της div που περιέχει τη φόρμα για το rss μας.. Με τον κώδικα jQuery κάθε φορά που πατάμε ένα εικονίδιο παίρνουμε τον τίτλο και τον αποθηκεύουμε σε μία μεταβλητή τη “show_the_div“.Στη συνέχεια στη γραμμή 5 είναι ολοφάνερο τι κάνουμε.Δημιουργούμε εμείς το html στοιχείο που θέλουμε να ελέγξουμε βάζοντας “#” που είναι το αναγνωριστικό του id μιας div και την τιμή που είναι μέσα στη μεταβλητή μας.Οπότε αυτόματα ενεργοποιώ την div που θέλω να δείξω και με το “slideToggle” την κάνω ανάλογα είτε slideUp είτε slideDown.

Έμεινε μόνο το link που κλείνει την κάθε div.Ας δούμε πως θα μοιάζει το αρχείο μας “hideDiv.js” ολόκληρο!
 

Έτοιμος ο κώδικας.Για να δούμε λίγο το συνολικό head της html σελίδας μας μέχρι στιγμής ..
 

Λειτουργία των plugins και ενσωμάτωση στο κώδικα!

Στο τελευταίο κομμάτι του tutorial θα μιλήσουμε λίγο για δύο plugins που χρησιμοποιήσαμε.Τα plugins είναι έτοιμες εφαρμογές που μπορούμε να ενσωματώνουμε στη σελίδα μας και να μας γλυτώνουν από το να γράφουμε περιττό κώδικα.
Το ένα plugin από αυτά μας κάνει validate τη φόρμα επικοινωνίας,δηλαδή αν δεν συμπληρώσουμε στοιχεία δεν μπορούμε να τη στείλουμε .Το άλλο plugin μας δημιουργεί ένα lightbox effect.Δείτε το effect αυτό στη σελίδα:
jQuery lightbox plugin

Ενσωμάτωση του lightbox plugin..

1)Κατεβάζουμε το plugin.

2)Στη σελίδα που κατεβάσαμε το plugin εάν πατήσουμε στο link “how to use” θα δούμε αναλυτικές οδηγίες χρήσεως.

3.)Μέσα στο φάκελο Zip που κατεβάσαμε υπάρχει ένας φάκελος με το όνομα “js” που περιέχει αρχείο το οποίο ονομάζεται “jquery.lightbox-0.5.js″..Αυτό το αρχείο τo αντιγράφουμε και εν συνεχεία το τοποθετούμε στον δικό μας φάκελο με το όνομα “js“.Είναι αυτός ο φάκελος που περιέχει και τα άλλα jQuery αρχεία μας.Επίσης στο zip που κατεβάσαμε υπάρχει ένα αρχείο css, το “jquery.lightbox-0.5.css”.Αυτό το αρχείο το τοποθετούμε στο φάκελο που έχουμε και το αρχείο css μας ,το “styles.css”.Στον ίδιο φάκελο τοποθετούμε και τον φάκελο images που βρίσκεται μέσα στο zip που κατεβάσαμε.

4.)Το μόνο που χρειάζεται είναι να δούμε πως θα κάνουμε -με jQuery κώδικα- κάθε φορά που πατάμε σε μία μικρογραφία να ανοίγει η κανονική φωτογραφία με το Lightbox effect.Εάν διαβάσουμε στη σελίδα “how to use” που υπάρχει στη σελίδα του plugin θα δούμε ότι υπάρχει μια ενότητα- η ενότητα activate στην οποία βλέπουμε πως μπορούμε να το ενεργοποιήσουμε εύκολα.Εμείς λοιπόν βλέποντας τον κώδικα που χρειάζεται θα δημιουργήσουμε ένα κενό jQuery αρχείο και θα το σώσουμε με το όνομα “mylightbox.js”.Το αρχείο αυτό το τοποθετούμε στο δικό μας φάκελο "js"..Μέσα σε αυτό το αρχείο θα τοποθετήσουμε τον κώδικα :
 

Με τον παραπάνω κώδικα που ουσιαστικά βρήκαμε έτοιμο στη σελίδα του Plugin ορίζουμε ότι όταν πατηθεί το link που υπάρχει μέσα στο html στοιχείο με κλάση “.boxes” να εφαρμοστεί πάνω του το lightbox.Τα link μας είναι ανάμεσα στα :
 

Εννοείται ότι πρέπει να καλέσουμε το αρχείο που δημιουργήσαμε -το "mylightbox.js" αλλά και το αρχείο “jquery.lightbox-0.5.js” στο head της σελίδας μας..Και είμαστε έτοιμοι!
 

Ας δούμε λίγο συνολικά το head της σελίδας μας…Μη σας φοβίζει το scriptaki που υπάρχει--είναι για το validation και χρησιμοποιείται με το validation plugin!
 

Επίλογος-live demo -πηγές…

Εδώ κάπου τελειώνει το εξαντλητικό αλλά ωραίο premium tutorial.Μπορείτε να δείτε ένα live demo εδώ.

1)Τα εικονίδια μας τα κατεβάσαμε από το site 108 high resolution dark denim social media icons.Για social media icons μπορείτε επίσης να δείτε το freebie που έχουμε με 200 δωρεάν social media icons


2)To lightBox plugin μπορείτε να το βρείτε εδώ..jQuery lightbox plugin

To validation jQuery plugin μπορείτε να το βρείτε εδώ..validation plugin και μπορείτε να δείτε ένα tutorial χρήσης εδώ και εδώ..

Τα αρχεία μας μπορείτε να τα κατεβάσετε από δω

Πρώτα θα πρέπει να κατεβάσουμε τα αρχεία που χρειάζονται και να τα τοποθετήσουμε μέσα στο φάκελο του template μας.

slide.zip

Το αρχείο αυτό περιλαμβάνει τις εικόνες, τα αρχεία του jquery και τα αρχεία css. Αποσυμπιέστε το αρχείο και τοποθετήστε με την ίδια δομή μέσα στο φάκελο σας.

Στη συνέχεια μέσα στο αρχείο index.html και μέσα στην ετικέτα <head> βάλτε τις παρακάτω γραμμές κώδικα:

Στο κάτω μέρος της σελίδας και ακριβώς πάνω από την ετικέτα </body> εισάγετε τις παρακάτω γραμμές κώδικα:
 

Έπειτα μέσα στο αρχείο index.html και μέσα στο div slide θα εισάγουμε το παρακάτω:
 

Ολόκληρος ο κώδικας της σελίδας μέσα στο <body></body>:
 

LIVE DEMO

Οι ρυθμίσεις για το slideshow που μας ενδιαφέρουν είναι οι:

animSpeed:500 Καθορίζει την ταχύτητα της εναλλαγής της εικόνας
pauseTime:3000 Καθορίζει το χρόνο παραμονής της εικόνας

που βρίσκονται στο αρχείο jquery.nivo.slider.js

Εάν δε θέλετε να εμφανίζονται οι τίτλοι κάτω από τις εικόνες αφαιρέστε την ιδιότητα title από την εικόνα ώστε να γίνει σαν το παρακάτω.
 

Καλή επιτυχία

Πρώτα θα δημιουργήσουμε ένα αρχείο για το css το οποίο θα το ονομάσουμε index.css και έπειτα θα δημιουργήσουμε και ένα αρχείο html το οποίο θα το ονομάσουμε index.html. Στην συνέχεια θα συνδέσουμε τα δύο αυτά αρχεία γράφοντας το παρακάτω στο head του index.html:

Θα πρέπει να φροντίσουμε όλα τα αρχεία μας μαζί με τις εικόνες να βρίσκονται στον ίδιο φάκελο.
Αφού συνδέσαμε τα αρχεία μας θα αρχίσουμε να γράφουμε το CSS μας.

Το πρώτο πράγμα που θα γράψουμε είναι:

Το margin δηλώνει ότι τα περιθώριά του από όλες τις πλευρές θα είναι μηδενικά, το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό background.gif και το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά.
Live demo

Στην συνέχεια θα τοποθετήσουμε το κύριο div στο οποίο θα τοποθετηθεί όλη η ιστοσελίδα μας.

Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο, το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_back.gif
Στην συνέχεια μέσα στο body της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

Live demo


Το επόμενο div μας θα είναι το header και στο css αρχείο μας γράφουμε το:

Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά , το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_banner.gif.
Στην συνέχεια μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Live demo

Το επόμενο div μας θα είναι το navigation και στο css αρχείο μας γράφουμε το:

Tο padding-top είναι τα περιθώρια που θα έχει το κείμενο του μενού από το πάνω μέρος του div και αυτό είναι 9 px, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό navbar.gif.
Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div header θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Live demo

Το επόμενο div θα είναι το main_content μέσα στο οποίο θα τοποθετήσουμε όλα τα divs που θα χρησιμοποιήσουμε για το περιεχόμενο της ιστοσελίδας μας.

Όλα τα padding είναι τα περιθώρια που θα έχει το περιεχόμενο του div από τις 4 πλευρές του και αυτό είναι 20 px (παρατηρήστε ότι το άθροισμα του width και των padding-left και padding-right μας κάνουν 781px,) το Width είναι το πλάτος του και το Height είναι το ύψος του και το background:none δηλώνει ότι δεν θα τοποθετηθεί τίποτα σαν φόντο.
Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div navigation θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Live demo

Το επόμενο div θα είναι το retouch δηλαδή το πάνω αριστερά «κουτί»

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.

Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το content1 δηλαδή το «κουτί» που βρίσκεται δεξιά του retouch.

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.

Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div retouch θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το funny δηλαδή το μεσαίο αριστερά «κουτί»

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content1 θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το content2 δηλαδή το «κουτί» που βρίσκεται δεξιά του funny.

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left και top δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά και πάνω 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων και το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div funny θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το random δηλαδή το κάτω αριστερά «κουτί»

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content2 θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo


Τελευταίο div που θα τοποθετήσουμε είναι το footer:

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 10 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 34px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div container και κάτω από το σημείο που κλείνει το div main_content θα πρέπει να γράψουμε το παρακάτω:

Οπότε θα έχουμε το παρακάτω:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

1 minute ago, NickTheGreek said:

αποκλείεται !

 

 CRT ???

Λαθος,2005 ηθελα να πω

Ειμαι στο 1995 και ειμαι απολυτα ευχαριστημενος με αυτο

Το πρώτο μας βήμα είναι να ανοίξουμε ένα καινουργιο αρχείο διαστάσεων 400x400. Με άσπρο χρώμα φόντου.

Μετά επιλέγουμε το Rectangular Marquee και πάμε στις επιλογές που ανοίγουν πάνω πάνω και τις ορίζουμε ώς εξής :


Μόλις το κάνετε αυτό, κάντε ένα σχήμα στο κέντρο του αρχείου σας. Θα μοιάζει κάπως σαν την εικόνα 1.



Γεμίστε την επιλογή σας με το χρώμα #EFEFEF. Πατήστε CTR+D

Πρέπει να μοιάζει με την εικόνα 2.



Μετά πατήστε Layer > Layer Style > Blending Options και χρησιμοποιήστε τις παρακάτω ρυθμίσεις :

Bevel and Emboss
Inner Shadow
Stroke
Drop Shadow

Εδώ μπορείτε να κατεβάσετε το Micro Buttons Style !!

Τώρα η δημιουργία σας πρέπει να μοιάζει με την εικόνα 3.



Επόμενο βήμα είναι να προσθέσουμε τα γράμματα. Την γραμματοσειρά που χρησιμοποιήσα μπορείτε να την κατεβάσετε απο εδώ

Επιλέξτε το Horizontal Type Tool και ρυθμίστε τις επιλογές ώς εξής :


Γράψτε τη λέξη που θέλετε και τελειώσατε...!!

Έφτιαξα μερικά κουμπάκια για να τα συγκρίνετε με τις δικές σας δημιουργίες !



Καλό Design...

1. Δημιουργούμε ένα αρχείο ότι διαστάσεων επιθυμούμε με άσπρο background. Εγώ διάλεξα 400x400. Πατάμε το γράμμα D για να γυρίσουμε την παλέτα των χρωμάτων στην αρχική θέση τους (Μαύρο/Άσπρο). Τώρα πάμε Filter > Texture > Grain. και φτιάχνουμε τις ρυθμίσεις όπως στην εικόνα απο κάτω.



Το αποτέλεσμα που θα έχουμε θα είναι σαν της εικόνας 1.


Εικόνα 1

2. Πηγαίνουμε Filter > Artistic > Neon Glow και χρησιμοποιούμε τις ρυθμίσεις που φαίνονται στη παρακάτω φωτογραφία. Χρώμα : #00FF00



Το αποτέλεσμα του 2ου βήματος πρέπει να είναι όπως της εικόνας 2.


Εικόνα 2

3. Τελευταίο βήμα για την ολοκλήρωση του εφφέ. Πηγαίνουμε Filter > Stylize > Glowing Edges και χρησιμοποιούμε της ρυθμίσεις της παρακάτω εικόνας.



Αυτό είναι και το τελικό αποτέλεσμα που πρέπει να μοιάζε με την εικόνα 3.

Επιλεγουμε το εργαλειο κυκλικης επιλογης Και δημιουργια μια κυκλικη επιλογη οπως στη παρακατω εικονα.



Το επομενο βημα ειναι να δημιοργησουμε ενα κυκλικο ντεγκραντε. Επιλεγουμε λοιπον τα εξης 2 χρωματα:

0099CC και 0066CC

Tα τοποθετουμε στον επιλογεα χρωματος στη γραμμη εργαλειων ως εξης:

χωρις να εχουμε χασει την κυκλικη επιλογη δημιουργουμε ενα ντεγκραντε σαν κι αυτο της παρακατω εικονας.



στο επομενο βημα θα χρειαστουμε ενα pattern.
Δημιουργηστε ενα νεο αρχειο 2 χ 2 Pixels transparent kai γεμιστε ενα μονο Pixel με μαυρο χρωμα αφηνοντας τα υπολοιπα διαφανα. Οριστε την εικονα ως Pattern (Edit > Define Pattern) και κλειστε το.

Εχοντας ακομα την κυκλικη επιλογη δημιουργηστε ενα νεο layer και επιλεξτε Select > Modify > Contract > 1 pixel. Και μετα επιλεξτε Select > Feather > 5 pixels.

Επιλεξτε το bucket tool και πανω ψηλα στις ιδιοτητες επιλεξτε οτι φαινεται στην εικονα.

γεμιστε την κυκλικη επιλογη στο νεο Layer με αυτο το pattern.

θα πρεπει να δειτε κατι τετοιο:




Επομενο βημα:

χωρις να εχουμε χασει την κυκλικη επιλογη δημιουργουμε ενα 3ο Layer και αποκοπτουμε κομματι της κυκλικης επιλογης οπως στη παρακατω εικονα:





αυτο γινεται επιλεγοντας το εργαλειο κυκλικης επιλογης και κρατωντας το πληκτρο ALT πατημενο "διωχνουμε μερος της επιλογης.

Γεμιζουμε οτι απεμεινε απο την επιλογη μας με ενα gradient Λευκο : Διαφανο οπως στη παρακατω εικονα:




Εχοντας επιλεγμενο αυτο το layer επιλεγουμε Edit > Transform > Scale

και προσαρμοζουμε το Layer οπως στη εικονα:




μετα δημιουργουμε ενα κενο layer και με το εργαλειο κυκλικης επιλογης κανουμε μια επιλογη σαν την παρακατω εικονα εφαρμοζοντας στην επιλογη Feather : 5 pixels



γεμιζουμε την περιοχη με λευκο οριζουμε το Layer se Overlay mode και ριχνουμε ενα Blur Φιλτρο περιπου 18 Pixels.

θα πρεπει να δειτε κατι τετοιο:




επιστρεφουμε στο πρωτο μας layer (αυτο με το gradient) και επιλεγουμε Layer > Layer Style > Outer Glow Και μετα Inner Glow

Οι ρυθμισεις:





το αποτελεσμα λογικα πρεπει να ειναι κατι τετοιο:



για να δουμε κανα οραιο αποτελεσμα! περιμενω! εμενα μου βγηκε αυτο!

Ένα απλό βοήθημα που θα κάνει τις γυναίκες ευτυχισμένες.

Πάμε:

Ανοίγουμε την εικόνα και κάνουμε δεξί κλικ στο layer και μετά Duplicate.



Στο αντίγραφο σβήνουμε προσεκτικά με τη γόμα όλα εκτός από τις περιοχές που υπάρχει δέρμα. Για να βλέπουμε πιο εύκολα το αποτέλεσμα πατάμε το ματάκι που υπάρχει δίπλα στο layer.



Κάνουμε Ctrl + Click στο πάνω layer και επιλέγουμε το φίλτρο >Filter>Noise>Median. Η τιμή πρέπει να είναι 3-4



Ανοίξτε το ματάκι του background layer

Δοκιμάστε το με φωτογραφίες γνωστών σας και πουλήστε τες πολύ ακριβά

Εδώ θα δούμε πώς δουλεύει το `mask` στο photoshop
Και τη μπορούμε να κάνουμε με αυτό.
Πχ εγώ έκανα το παρακάτω για της ανάγκες της παρουσίασης

Ξεκινάμε,
θα κάνουμε 7 ή 9 κινήσεις ανάλογα αν η εικόνα που χρησιμοποιούμε είναι κλειδωμένη (βλέπε στάδιο 1) αν υπάρχει η κλειδαριά κάνουμε διπλό κλικ στο (2) και πατάμε οκ στο παράθυρο που θα εμφανιστεί ,αν δεν υπάρχει παραβλέπουμε το (1+2).
αν και πάλι δεν μπορούμε να επέμβουμε στην εικόνα θα πρέπει να αλλάξουμε το (mode) πηγαίνοντας πάνω στο μενού (image-Mode-RGB color)

Συνεχίζομαι
Επιλέγουμε τώρα το (Magic wand tool) (3) και κάνουμε κλικ στο (4)
Τώρα στο μενού επιλέγουμε (5) (Layer-Abb Layer Mask-Hide Selection)
Κλικ στο (6) και μετά στο (7) για να επιλεγεί η δεύτερη εικόνα
Πατάμε το αριστερό κλικ και το κρατάμε πατημένο για να σύρουμε την εικόνα πάνω στην άλλη ( 8 )
Τώρα στο μενού (9) επιλέγουμε (Layer-Greate clipping mask) ή πατάμε Ctrl+G

Τελειώσαμε ,με λίγη περσότερη φαντασία μπορείτε να κάνετε και κάτι άλλο

Βήμα 1

Ανοίξτε (File -> Open... ή Ctrl+O) την φωτογραφία που θέλετε να κάνετε σε ανισματικό στυλ.



Βήμα 2

Διπλασιάστε το μοναδικό layer σας (Background) σέρνοντάς το πάνω στο new layer κουμπί .
Κρύψτε το καινούριο layer απενεργοποιώντας το μάτι στα αριστερά του και μεταβείτε στο αρχικό layer κάνοντας click πάνω του.
Εφαρμόστε το φίλτρο: Filter -> Artistic -> Cutout με τις ακόλουθες ρυθμίσεις:
No of levels: 6
Edge Simplicity: 4
Edge Fidelity: 2
Προσοχή! Ανάλογα με το μέγεθος και το είδος της εικόνας μπορεί να χρειαστεί από λίγο έως πολύ να πειραματιστείτε με τις άνωθι τιμές.



Βήμα 3

Μεταβείτε τώρα στο καινούριο layer (Background copy) και επανεμφανίστε το, εάν αυτό δεν γίνει αυτόματα.
Αλλάξτε το blend mode από Normal σε Pin Light και είστε έτοιμοι!

Ένα αρκετά συνηθισμένο εφέ και πολύ απλό.
Επίσης φαίνεται πολύ όμορφο εάν το εφαρμό-
σετε σε μία περιοχή μόνο της εικόνας (όπως
στο video clip του Δάντη, Δως μου φωτιά).

Ακτίνες-Χ

Βήμα 1

Ανοίξτε (File -> Open... ή Ctrl+O) την φωτογραφία που θέλετε να περάσετε απ' το "Ακτινολογικό".




Βήμα 2

Αντιστρέψτε τα χρώματα της εικόνας με Ctrl+I ή Image -> Adjust -> Invert.




Βήμα 3

Εφαρμόζουμε Image -> Adjust -> Hue/Saturation
και αφού ενεργοποιήσουμε το Colorize εισάγετε:
Hue: 202
Saturation: 54
Lighness: 0

Μικροκουμπιά βλέπω τον τελευταίο καιρό παντού! Σε flashάκια, σε απλές σελίδες, σε προγράμματα...
Μέχρι και ολόκληρες σελίδες σχεδόν σ' αυτό το στυλ...
Μάθετε να κάνετε τα δικά σας κουμπάκια!

Μικρο-κουμπιά

Βήμα 1

Κάντε μία νέα εικόνα (File -> New) με αυτά τα χαρακτηριστικά (κατά προτίμηση)
Width: 400 pixels
Height: 400 pixels
Mode: RGB color
Contents: White

Κάντε ένα νέο layer .
Επιλέξτε το Rectangular Marquee tool και έχοντας αυτές τις ρυθμίσεις:

κάντε μιά επιλογή με ένα κλικ στην εικόνα.
Κάνετε αυτή τη ρύθμιση για να είστε σίγουροι οτι το κουμπί θα έχει συγκεκριμένες διαστάσεις.
Εάν θέλετε βέβαια βάζετε διαφορετικό width (=πλάτος) για κουμπιά με μεγαλύτερη λέξη πάνω ή αλλάζετε και τις δύο διαστάσεις.




Βήμα 2

Κάντε το foreground χρώμα κάποιο "παστέλ" χρώμα καλύτερα (δηλαδή χρώμα που να έχει πολύ άσπρο) ή το χρώμα που έχουμε εδώ: #EFEFEF
Έπειτα γεμίζουμε την επιλογή με αυτό το χρώμα είτε πατώντας Alt+Delete είτε πηγαίνοντας Edit -> Fill -> Foreground Color -> OK.
Πατάμε Ctrl+D για να αποεπιλέξουμε.
Μετά, πηγαίνουμε Layer -> Layer Style -> Drop Shadow και βάζουμε μία-μία τις εξής ρυθμίσεις (εναλλακτικά κάνουμε διπλό click πάνω στο layer που είμαστε):





!Ιδέα!
Πριν πατήσετε OK, μπορείτε να αποθηκεύσετε το layer style, έτσι ώστε κάποια άλλη φορά που θα χρειαστεί να εφαρμόσετε όλα αυτά (Bevel and Emboss, Stroke κτλ.) να τελειώσετε με δύο κλικ!
Πηγαίνετε στο "Styles" και πατάτε το κουμπί New Style. Έπειτα, δίνετε ένα όνομα για το style και πατήστε ΟΚ. Τώρα έχετε αποθηκεύσει το style!
Όταν θα το ξαναχρειαστείτε το εφαρμόζετε από την λίστα αυτήν.




Βήμα 3

Θα μας προκύψει κάτι τέτοιο. Τελευταίο βήμα είναι το κείμενο που θα προσθέσουμε.





Βήμα 4

Οι καλύτερες γραμματοσειρές για τέτοια κουμπιά είναι οι bitmap γραμματοσειρές. Μία bitmap γραμματοσειρά που είναι πολύ ωραία, είναι η 04b_21 την οποία μπορείτε να κατεβάσετε απο εδώ
Πατήστε το πλήκτρο D στο πληκτρολόγιο σας ούτως ώστε το foreground και το background χρώμα να γίνει μαύρο και άπρο αντιστοίχως.

Επιλέγετε το Type tool και βάζετε αυτές τις ρυθμίσεις:

!Ιδέα!
Κάντε το ενεργό κουμπί (μέσω Flash ή DHTML) κάνοντας το να αλλάζει χρώμα όταν το ποντίκι περνάει από πάνω του και όταν το κλικάρεις να αλλάζει direction το Bevel and Emboss.




Κουμπωθείτε! (με την καλή έννοια βεβαίως...)

Αχ, αυτά τα scanlines. Όλοι θέλουν να μάθουν
πως γίνονται. Αυτός ο τρόπος που περιγράφω
στις επόμενες σειρές είναι κατά την γνώμη μου
ο πιο εύκολος, ποιοτικός και αποτελεσματικός.

Γραμμές TV

Βήμα 1

Κάντε μία νέα εικόνα (File -> New) με αυτά τα χαρακτηριστικά
Width: 1
Height: 3
Mode: RGB color
Contents: Transparent

Κάντε ένα πολύ μεγάλο zoom (π.χ. 1600%) και καλό θα ήταν να μεγαλώσετε και λίγο το παράθυρο.
Πατήστε στο πληκτρολόγιο σας το πλήκτρο D και μετά Χ για να γίνει το foreground και background χρώμα άσπρο και μαύρο αντιστοίχως.
Με την βοήθεια του Marquee tool επιλέξτε το πάνω-πάνω pixel της εικόνας.
Έπειτα πατήστε Ctrl+Del, εναλλακτικά Edit -> Fill... -> Background color -> OK.
Μετά πατήστε Ctrl+A ή Select -> All.
Τέλος πηγαίνετε Edit -> Define pattern -> OK δίνοντάς του ένα όνομα της προτίμησής σας.




Βήμα 2

Ανοίξτε την εικόνα που θέλετε και δημιουρήστε ένα νέο layer .



Πηγαίνετε Edit -> Fill -> Pattern (απο κάτω επιλέγετε το pattern που φτιάξατε στο βήμα 1) -> ΟΚ.
Τέλος, αν το αποτέλεσμα είναι πολύ σκοτεινό χαμηλώστε το opacity του layer με τις γραμμές.



Σημείωση: Το βήμα 1 χρειάζεται να το κάνετε μία μόνο φορά. Έπειτα κάθε φορα που θέλετε TV scanlines κάνετε μόνο το βήμα 2.

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

Απλό σε μωσαϊκό

Βήμα 1

Ανοίξτε την εικόνα που θέλετε.
Σύρτε το layer της εικόνας (Background κατά πάσα πιθανότητα) πάνω στο new layer κουμπί .




Βήμα 2

Εφαρμόστε το φίλτρο μωσαϊκού:
Filter -> Pixelate -> Mosaic -> 6 (ή περισσότερα αν η εικόνα είναι μεγάλη) -> OK




Βήμα 3

Καθώς είστε στο ίδιο layer εισάγετε μια μάσκα .
Τέλος, επιλέξτε το Gradient tool και κάντε ένα gradient από αριστερά προς τα δεξιά της εικόνας (ή όπως αλλιώς θέλετε)
Συμβουλή: Αν δεν σας αρέσει η εναλλαγή και θέλετε να ξανακάνετε το gradient, δεν χρειάζεται undo, απλά το ξανακάνετε!

Σ' αυτό το βοήθημα εξοικειωνόμαστε με την
λειτουργία του Inset. Η χρησιμότητα του inset
είναι πολύ μεγάλη για τους gui designers γι' αυ-
τον τον λόγο, φρόντισα αυτό το βοήθημα να
είναι αρκετά πλήρες.
To εφέ του inset είναι ένα πάρα πολύ χρήσιμο
γι' αυτούς που σχεδιάζουν κουμπιά ή οθόνες
πάνω σε μία επιφάνεια γιατί δίνει την αίσθηση
του βάθους και του οτι το κουμπί υπάρχει.
Δείτε το εξής παράδειγμα:



Inset

Βήμα 1

Δεδομένου του ότι έχετε κάνει ενα panel για το interface σας ήδη, κάντε ένα νέο layer .
(για το panel δείτε το βοήθημα Μεταλλική επιφάνεια)
Το επόμενο βήμα είναι η δημιουργία ενός μικρού μεταλλικού κουμπιού.




Βήμα 2

Πατήστε Ctrl+R ή View -> Rulers ούτως ώστε να εμφανιστούν οι χάρακες.
Τώρα με την βοήθεια των χαράκων θα ορίσουμε δύο ευθείες οι οποιες θα τέμνονται εκεί που θέλουμε να βρίσκεται το κουμπί. Έτσι κάνοντας click πάνω σε έναν από τους χάρακες και κρατώντας το κουμπί πατημένο μπορείτε να ορίσετε μία από τις δύο γραμμές. Ομοιοτρόπως, θα κάνετε και τη δεύτερη.
Εάν γίνει κάποιο λάθος και θέλετε να τις μετακινήσετε, θα χρειαστεί πρώτα να επιλέξετε το Move Tool .
Εάν πάλι κάνετε περισσότερες γραμμές-οδηγούς απ' όσες χρειάζεστε πάλι με το Move Tool σύρτε τες πάνω στου χάρακες.




Βήμα 3

Πληκτρολογήστε D και Χ για να έχετε και ορίστε foreground χρώμα το #C1C2C4.
Αφού βρείτε το σημείο σας και το ορίσετε με την βοήθεια των ευθειών επιλέξτε το Ellipse tool και εισάγετε αυτές τις ρυθμίσεις:


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

Ίσως πολλοί να μου εκφράσετε την εξής απορία τώρα:
- Ρε 'συ φίλε τι γίνεται αν εγώ δεν θέλω στρογγυλό κουμπί; Είναι υποχρεωτικό να κάνω το κουμπί σου;
- Όχι, βέβαια... Κατ' αρχάς, η ιδέα του κουμπιού είναι πρόσθετη σ' αυτό το tutorial. Κανονικά το tutorial είναι μόνο για το εφέ του inset αλλά είπα να προσθέσω και αυτό το εύκολο κουμπάκι για πειραματισμό. Εάν τώρα εσείς θέλετε ελλειπτικό κουμπί αντί για Circle επιλέγετε Proportional και εισάγετε μία αναλογία ύψους και πλάτους που σας βολεύει. Εάν τώρα θέλετε τετράγωνο ή κάποιο άλλο σχήμα τώρα επιλέξτε ανάλογα αλλα φροντίστε προτίστως να έχετε επιλέξει το From Center.




Βήμα 4

Πατήστε Ctrl+H ή View -> Extras ούτως ώστε να εξαφανιστούν προσωρινά οι γραμμές.
Για ακόμα μια φορά θα χρησιμοποιήσουμε layer styles.
Κάνουμε διπλό click στο layer με το κουμπί και ανοίγει το παράθυρο Layer Styles.

Αρχίζουμε με Inner Shadow.


Συνεχίζουμε με Inner Glow:


Ενεργοποιούμε και το Gradient Overlay με τις ρυθμίσεις:


Και τέλος Stroke


Kαι τώρα στο κυρίως πιάτο!




Βήμα 5

Επανεμφανίστε τις γραμμές πατώντας Ctrl+H ή View -> Extras.
(Εάν η επιφάνεια στην οποία εφαρμόζετε το inset δεν είναι μεταλλική τώρα είναι η κατάλληλη στιγμή για να αλλάξετε foreground χρώμα επιλέγοντας ένα χρώμα ελαφρώς πιο σκούρο από αυτό της επιφάνειας.)

Δημιουργήστε ένα ακόμη layer και μεταφέρετέ το κάτω από το layer του κουμπιού, σέρνωντάς το.

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

Πατήστε για τελευταία φορά Ctrl+H ή View -> Extras ώστε να εξαφανιστούν οι γραμμές και κάντε διπλό click στο layer του μεγαλύτερου κύκλου.




Βήμα 6

Πατήστε για τελευταία φορά Ctrl+H ή View -> Extras ώστε να εξαφανιστούν οι γραμμές και κάντε διπλό click στο layer του μεγαλύτερου κύκλου.
Ενεργοποιήστε το Gradient Overlay και αφού εισάγετε αυτές τις ρυθμίσεις

πατήστε ΟΚ.



Αυτό ήταν! Δεν ήταν και τόσο δύσκολο... έτσι;

Βήμα 1

Κάντε μία νέα εικόνα (File -> New) με αυτά τα χαρακτηριστικά της προτίμησής σας.
(αλλά καλό θα ήταν να επιλέξετε Contents: White)
Αλλάξτε το foreground color σε #438CCA.
Με το Type tool κάντε ένα κλικ στην εικόνα και με μια μεγάλη και serif γραμματοσειρά (π.χ. Times New Roman) γράψτε το κείμενο που θέλετε.




Βήμα 2

Και τώρα το ωραίο μέρος! Πηγαίνετε Layer -> Layer Style -> Drop Shadow και φροντίστε να έχετε αυτές τις ρυθμίσεις.






(color: #005082 και opacity από 75 έως 100% κατά βούληση)

Βήμα 1

Κάντε μία νέα εικόνα (File -> New) με αυτά τα χαρακτηριστικά (κατά προτίμηση)
Width: 600
Height: 600
Mode: RGB Color
Contents: White
Κάντε ένα νέο layer .
Foreground χρώμα: #E6E6E6
Κάνετε το σχήμα που θέλετε με όποιον τρόπο επιθυμείτε (με Rounded Rectangle Tool , με Elliptical Marquee Tool και μετά Alt+Del για γέμισμα ή όπως αλλιώς θέλετε)
Δεδομένου ότι δεν έχετε τίποτα επιλεγμένο, προχωρήστε στο βήμα δύο.




Βήμα 2

Καιρός να βάλουμε τα layer styles.
Κάνουμε διπλό click στο layer με το σχήμα μας και ανοίγει το παράθυρο Layer Styles.
Αρχίζουμε με Inner Shadow.


Συνεχίζουμε με Inner Glow:


Επιλέγουμε και Satin με αυτές τις ρυθμίσεις:


Και Gradient Overlay

Τέλος, πατάμε OK.

Βήμα 1

Κάντε μία νέα εικόνα (File -> New) με αυτά τα χαρακτηριστικά (κατά προτίμηση)
Width: 400 pixels
Height: 400 pixels
Mode: RGB color
Contents: White

Πηγαίνετε Filter -> Render -> 3D Transform.




Βήμα 2

Επιλέξτε το Cube Tool με τον κύβο στο εικονίδιο.
Τώρα σχεδιάστε έναν κύβο



και απο πάνω του επαναλάβετε την ίδια διαδικασία πολλές φορές.




Βήμα 3

Επιλέγοντας το εργαλείο που δείχνει το βέλος στην εικόνα, περιστρέφουμε το glob μας μεχρι να σκιαστούν όλες οι έδρες του.
Μόλις τα καταφέρουμε πατάμε ΟΚ!




Βήμα 4

Αν όλα πήγαν καλά, θα έχετε κάτι τέτοιο σαν αποτέλεσμα!
Αν δεν σας αρέσει αυτό το γκρι και θέλετε να αλλάξετε χρώμα συνεχίστε να διαβάζετε!



!Προαιρετικό!
Για τον επιχρωματισμό του glob μας πηγαίνουμε Image -> Adjustments -> Hue/Saturation και αφού ενεργοποιήσουμε την ένδειξη Colorize πειράζουμε το slider του Hue μέχρι να πετύχουμε το επιθυμητό χρώμα.