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

Βήμα 2

Επιλέγουμε το rounded Rectangle Tool (U)

Βήμα 3

Και διαλέγουμε την διάμετρο των pixels που θέλουμε να έχει η κούρμπα στις άκρες του σχήματος μας. Στο συγκεκριμένο παράδειγμα διαλέγουμε 3 pixels

Βήμα 4

Μετά δημιουργούμε το σχήμα μας. Για καλύτερο αποτέλεσμα, κάνουμε πολύ zoom και προσέχουμε το σχήμα μας να είναι ακριβώς πάνω στις γραμμές του πλέγματος, ώστε να μην κάνει ξεθώριασμα στις άκρες του.

Βήμα 5

Μετά επιλέγουμε το layer που δημιουργήσαμε στο δεξιά πάνελ, πατάμε αριστερό κλικ και επιλέγουμε Blending Options. Στην επιλογή Drop Shadow αυξάνουμε την απόσταση σε 4px, βάζουμε την γωνία στις 90 μοίρες και επιλέγουμε το Normal για Blending Mode

Βήμα 6

Στο μενού Inner Glow επιλέγουμε πάλι το normal για Blending Mode, το Technique φροντίζουμε να είναι Precise, και το μέγεθος σε 2px

Βήμα 7

Στο μενού Gradient Overlay επιλέγουμε τα χρώματα που θέλουμε να ξεκινάει και να τελειώνει το κουμπί που φτιάξαμε

Βήμα 8

Τέλος στο μενού Stroke επιλέγουμε 1px inside και διαλέγουμε ένα χρώμα λίγο πιο σκούρο από αυτό που χρησιμοποιήσαμε για να γεμίσουμε το κάτω μέρος του κουμπιού μας.

Βήμα 9

Το κουμπί μας είναι έτοιμο ! Μπορείτε να το κάνετε copy-paste και να το πειράξετε λίγο όπως στην εικόνα παρακάτω. Με αυτόν τον τρόπο δημιουργούμε τις 3 διαφορετικές καταστάσεις του κουμπιού μας. Η πρώτη είναι η κανονική κατάσταση, η δεύτερη όταν περνάμε τον κέρσορα από πάνω και η τρίτη (στην οποία έχουμε απλά βγάλει τελείως το Drop Shadow) θα είναι η κατάσταση όταν θα κάνουμε κλικ.

Στο επόμενο βοήθημα θα δούμε πώς μπορούμε να φέρουμε στην ζωή τα κουμπιά που δημιουργήσαμε χρησιμοποιώντας CSS και HTML και μάλιστα με δύο διαφορετικούς τρόπους. Έναν τρόπο με CSS sprites και έναν με καθαρό κώδικα.

Μπορείτε να κατεβάσετε τα κουμπιά εδώ

Διαβάστε περισσότερα για το 960 Grid System και το πως μπορείτε να το εκμεταλλευτείτε

Κατεβάστε το 960GS

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

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

Τι είναι τα GreekTuts Sessions

Τα GreekTuts Sessions είναι μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσουν από τον Σεπτέμβριο. H διεξαγωγή αυτών των οδηγών θα γίνει μέσω μιας online πλατφόρμας e-learning, που σας προσφέρει δυνατότητα αλληλεπίδρασης με τον παρουσιαστή σας. Οι εκπαιδεύσεις είναι προσωπικές, πράγμα που σημαίνει ότι έχετε την δυνατότητα να μάθετε όλα όσα χρειάζεστε από το σπίτι σας, τις ώρες και μέρες που σας βολέυουν.

Κατά την παρουσίαση, θα μπορείτε να δείτε σε video την εκπαίδευση και να κάνετε ερωτήσεις όσο συχνά χρειαστεί. Το μόνο εργαλείο που θα χρειαστείτε είναι ο αγαπημένος σας browser, και πολύ όρεξη για μάθηση.

Επίσης, μετά την ολοκλήρωση των εκπαιδεύσεων, θα μπορείτε να έχετε πλήρη πρόσβαση στα video αλλά και σε όλο το εκπαιδευτικό υλικό, με τους κωδικούς σας για πάντα.

Πακέτα Εκπαιδεύσεων

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

• Πλήρες Πακέτο – Για παρακολούθηση όλης της σειράς
• Συγκεκριμένο Κεφάλαιο – Για παρακολούθηση ενός συγκεκριμένου κεφαλαίου

* Οι τιμές των 2 πακέτων θα ανακοινωθούν σύντομα.

Περιεχόμενα Online Εκπαιδεύσης

Κεφάλαιο 1 – HTML & CSS

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

Κεφάλαιο 2 – Javascript & jQuery

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές λειτουργίες για την Javascript και θα δούμε πως μπορούμε έυκολα και γρήγορα να κάνουμε το περιεχόμενο της ιστοσελίδας μας πιο ενδιαφέρον και διαδραστικό για τον χρήστη. Επίσης θα δούμε τα πάντα για την διάσημη βιβλιοθήκη jQuery

Κεφάλαιο 3 – Front End Design

Σε αυτό το κεφάλαιο θα δούμε όλες τις βασικές αρχές που πρέπει να ακολουθούμε κατά την διάρκεια σχεδιασμού μιας ιστοσελίδας, και ποιά είναι τα λάθη που πρέπει να αποφέυγουμε. Επίσης θα δούμε και θα αναλύσουμε ποιά είναι τα διάφορα styles και trends που ακολουθούνται από designers σε όλο τον κόσμο.

Κεφάλαιο 4 – WordPress

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

Κεφάλαιο 5 – SEO & Promotion

Σε αυτό το κεφάλαιο θα μιλήσουμε για τις μηχανές αναζήτησεις και για το πώς μπορούμε να ανεβάσουμε την ιστοσελίδα μας ψηλά στις λίστες αποτελεσμάτων. Θα δούμε διάφορες τεχνικές προαγωγής της σελίδας μας, και όλα όσα πρέπει να αποφύγουμε κατά την προσπάθεια του Search Engine Optimization.

Φόρμα Εκδήλωσης Ενδιαφέροντος

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

[contact-form-7]

Για το παράδειγμα μας θα χρησιμοποιήσουμε μια καταπληκτική πανοραμική εικόνα της Πλατείας Ομονοίας, που δημοσιεύτηκε στο WeLoveAthens.wordpress.com

Βήμα 1

Ανοίγουμε την φωτογραφία μας στο Photoshop

Βήμα 2

Θα κάνουμε ένα αντίγραφο του Layer που έχουμε, τραβόντας το Layer μας μέχρι κάτω στο εικονίδιο “Create new layer”, ή με δεξί κλικ και “Duplicate Layer”

Βήμα 3

Θα δημιουργήσουμε μια μάσκα στο νέο Layer που φτιάξαμε. Αυτό το κάνουμε έχοντας επιλεγμένο το νέο layer και πατώντας το κουμπάκι “Add layer mask”

Βήμα 4

Τώρα θα επιλέξουμε την μάσκα που προσθέσαμε στο Layer μας κάνοντας κλικ επάνω της και θα επιλέξουμε το Gradient Tool, στο οποίο ορίζουμε την επιλογή “Reflected Gradient”.

Βήμα 5

Επιλέγουμε για χρώμα την επιλογή “Foreground to Transparent” και προσέχουμε να έχουμε μαύρο σαν βασικό χρώμα και λευκό σαν χρώμα παρασκηνίου

Βήμα 6

Έχοντας όλες τις παραπάνω επιλογές ενεργές, κρατάμε πατημένο το κλικ και σέρνουμε το ποντίκι μας μέχρι να καλύψουμε το σημείο στο οποίο θέλουμε να δώσουμε την ψευδαίσθηση της μινιατούρας

Μπορεί να μην άλλαξε τίποτα στην εικόνα σας, αλλά άν παρατηρήσετε, στο Layer της μάσκας, έχει προστεθεί κανονικά το gradient που δημιουργήσαμε.

Βήμα 7

Συνεχίζουμε κάνοντας κλικ πάνω στην εικόνα του Layer, στο οποίο έχουμε προσθέσει την μάσκα, για να το επιλέξουμε και πηγαίνουμε στο Filter > Blur > Lens Blur ή Gaussian Βlur (και τα δύο είδη θολώματος θα κάνουν την δουλειά, εμείς όμως θα δούμε τις επιλογές του Lens Blur)

Βήμα 8

Στον διάλογο του Lens Blur που εμφανίζεται κάνουμε τις εξής επιλογές:

• Source: Layer Mask
• Shape: Hexagon
• Radius: 38 και
• Distribution: Uniform

Σε αυτό εδώ το σημείο, μπορούμε να αλλάξουμε το”Radius” στο επίπεδο που μας ικανοποιεί. Μόλις είμαστε εντάξει με το αποτέλεσμα πατάμε “ΟΚ”

Βήμα 9

Αφού επιστρέψουμε στην εικόνα μας, πρέπει να ψάξουμε και να βρούμε τα σημεία τα οποία θόλωσαν αλλά λόγω του ότι υποτίθεται ότι είναι κοντά μας πρέπει να φαίνονται. Για παράδειγμα στην φωτογραφία μας το γλυπτό στην μέση της πλατείας. Αυτά τα σημεία πρέπει να τα “ξεθαμπώσουμε” δηλαδή με άλλα λόγια να τα αφαιρέσουμε από την μάσκα. Έτσι επιλέγουμε την μάσκα μας κάνοντας κλικ πάνω της και επιλέγουμε το “Eraser Tool”

Βήμα 10

Κάνοντας κλικ πάνω στην εικόνα, προσθέτουμε ή αφαιρούμε την μάσκα. Ουσιαστικά αυτή την στιγμή σβήνουμε ή χρωματίζουμε την μάσκα μας. Έτσι ανάλογα με το χρώμα παρασκηνίου που έχουμε, αν είναι λευκό σβήνουμε “θολούρα” από την μάσκα μας, αν είναι μαύριο προσθέτουμε “θολούρα” στην μάσκα μας. Σιγά σιγά λοιπόν καταλήγουμε στο εξής αποτέλεσμα

Βήμα 11

Ουσιαστικά έχουμε τελειώσει. Αυτό που θα κάνουμε τώρα λοιπόν είναι να αλλάξουμε λίγο το “Sharpness” της εικόνας μας και τα χρώματα της, ώστε να είναι πιο αληθοφανές ότι η εικόνα απεικονίζει μια μινιατούρα. Έτσι επιλέγουμε το αρχικό μας Layer που περιέχει την εικόνα και ανοίγουμε το Image > Adjustments > Hue/Saturation

Βήμα 12

Στον διάλογο “Hue/Saturation” ανεβάζουμε λίγο το Saturation και αν χρειαστεί περισσότερες αλλαγές, αλλάζουμε το Master Color σε όποια χρώματα θέλουμε να αλλάξουμε

Βήμα 13

Τελευταίο βήμα είναι να πάμε στο Filter >Sharpen >Unsharp Mask και να αυξήσουμε λίγο το ποσοστό τοις εκατό

Τελικό Αποτέλεσμα

Βήμα 1

Σχεδιάζουμε στο Photoshop (ή σε όποιο άλλο πρόγραμμα της αρεσκείας μας) τις δύο εικόνες που θα χρησιμοποιήσουμε ως παρασκήνιο στα κουμπιά μας

Δημιουργούμε ένα νέο κενό έγγραφο διαστάσεων 300px x 66px

Βήμα 2

Χρησιμοποιοώντας το Rounded Rectangle Tool και βάζοντας 5px radius καλύπτουμε το μισό της εικόνας μας με ένα παραλληλόγραμμο με τον εξής τρόπο

Βήμα 3

Ανοίγουμε τα Blending Options και βάζουμε τις παρακάτω επιλογές

Βήμα 4

Κάνουμε Duplicate το επιλεγμένο Layer (δεξί κλικ στο layer και Duplicate Layer) και ανοίγουμε τα Blending Options του νέου layer. Στις παραπάνω επιλογές απλά επιλέγουμε το κουτάκι Reverse και στο Gradient Overlay και στο Stroke. Αμέσως μετά, φέρνουμε το νέο Layer μας ακριβώς από κάτω από το πρώτο, και έτσι γεμίζουμε την εικόνα μας με 2 αντίθετες κατά τον άξονα Χ εικόνες. Τέλος αποθηκεύουμε την εικόνα μας με το όνομα bg_button_span.gif

Βήμα 5

Δημιουργούμε μια νέα εικόνα μεγέθους 18px x 66px και επαναλαμβάνουμε τα παραπάνω βήματα μέχρι να φτάσουμε στο εξής αποτέλεσμα

Αποθηκεύουμε την εικόνα αυτή με το όνομα bg_button_a.gif

Βήμα 6

Τώρα ας ξεκινήσουμε να γράφουμε τον κώδικα μας. Ξεκινάμε δημιουργώντας 2 νέα αρχεία, με τα ονόματα index.html και style.css. Ανοίγουμε το index.html με τον αγαπημένο μας text editor και γράφουμε:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css"  media="screen" />
<title>Buttons Test</title>
</head>
<body>
</body>
</html>

Με τον παραπάνω κώδικα δημιουργήσαμε την σελίδα μας, και την συνδέσαμε με το αρχείο style.css στο οποίο θα προσθέσουμε τα διάφορα styles που χρειάζονται

Βήμα 7

Τώρα ανοίγουμε το style.css και γράφουμε

body    {width:960px;margin:0 auto;}
.clear {
overflow: hidden;
width: 100%;
}

Με τον παραπάνω κώδικα δημιουργήσαμε τα βασικά styles που χρειζόμαστε.

Βήμα 8

Τώρα ήρθε η ώρα να δημιουργήσουμε το κουμπί μας. Μέσα στο <body> του αρχείου index.html θα προσθέσουμε τον εξής κώδικα

<a href="#"><span>Blue Button</span></a>

Με τον παραπάνω κώδικα δημιουργούμε ένα νέο σύνδεσμο (Anchor) και μέσα προσθέτουμε ένα <span>

Βήμα 9

Ας δώσουμε τώρα style στο στοιχείο που δημιουργήσαμε. Στο αρχείο style.css γράφουμε

a {
background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 33px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
outline:0;
}
a span {
background:url("images/bg_button_span.gif") no-repeat scroll 0 0 transparent;
display:block;
line-height:24px;
padding:4px 0 5px 18px;
}
a:hover {
background-position: bottom right;
color: #fff;
outline: none;
}
a:hover span {
background-position: bottom left;
padding: 5px 0 4px 18px;
}

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

Αποτέλεσμα

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

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Βήμα 1

Δημιουργήστε ένα παραλληλόγραμμο με το Rectangle Tool ή με το Rectuangular Marquee Tool.

Μετά εφαρμόστε τα παρακάτω εφέ στο παραλληλόγραμμο σας:

Το αποτέλεσμα:

Βήμα 2

Προσθέστε οποιοδήποτε κείμενο πάνω στο σχήμα σας (παρακάτω χρησιμοποίησα την γραμματοσειρά BrushScript).

Εφαρμόστε το παρακάτω εφέ στο κείμενο σας:

Το αποτέλεσμα:

Βήμα 3

Με το Rectuangular Marquee Tool, επιλέξτε μια περιοχή από την μια άκρη του σχήματος μέχρι την άλλη, αλλά αφήστε ένα μικρό διάστημα (περίπου 8 εκατοστά).

Κατεβάστε το αρχείο line.bat και φορτώστε το στο Photoshop. Μετά πηγαίνετε στο Edit > Fill…. Επιλέξτε Pattern στο Use και το pattern που μόλις φορτώσατε (συνήθως τον τελευταίο) στο Custom Pattern.

Το αποτέλεσμα:

Εφαρμόστε το παρακάτω εφέ:

Το αποτέλεσμα είναι:

Τώρα απλά αντιγράψτε τον Layer με τις γραμμούλες (χρησιμοποιώντας το κουμπί Alt ή την επιλογή Duplicate Layer…) και μετακινήστε τον στο κάτω μέρος του σχήματος.

Τελικό Αποτέλεσμα

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Βήμα 1

Ξεκινώντας, δημιουργούμε έναν νέο καμβά. (600×400 pixels)

Σημείωση : Σε αυτό το άρθρο χρησιμοποιούμε τις παραπάνω ρυθμίζεις. Εσείς καλό θα ήταν για την προσωπική σας κάρτα να χρησιμοποιήσετε CMYK χρώματα και 300dpi ανάλυση

Βήμα 2

Δημιουργούμε ένα νέο επίπεδο (layer), και με την βοήθεια του εργαλείου “ορθογωνικής επιλογής” σχηματίζουμε ένα ορθογώνιο (βασικό σχήμα της κάρτας μας) και έπειτα το γεμίζουμε με άσπρο χρώμα.

Βήμα 3

Κάνουμε διπλό click στο επίπεδο (layer) που δημιουργήσαμε, για να εμφανιστεί το μενού επιλογών “στυλ επιπέδου”. Προσθέστε το εφέ σκιάς και περιγράμματος σύμφωνα με τις παρακάτω εικόνες.

Βήμα 4

Δημιουργούμε ακόμα ένα νέο επίπεδο (layer), επιλέγουμε ένα χρώμα της αρεσκείας μας – όχι πολύ σκούρο (εγώ θα χρησιμοποιήσω μπλε, #003366) και το γεμίζουμε με χρώμα.

Βήμα 5

Εν συνεχεία θα “μικρύνουμε” ελάχιστα το επίπεδο που μόλις δημιουργήσαμε. Για να το πετύχουμε αυτό θα επιλέξουμε επεξεργασία/μετασχηματισμός/κλιμάκωση (edit/transform/scale) και κρατώντας πατημένο το κουμπί shift από το πληκτρολόγιό μας, μετακινούμε το επίπεδο προς τα μέσα πιάνοντας το από μια άκρη και τέλος το τοποθετούμε στο κέντρο του προηγούμενου επιπέδου.

Βήμα 6

Δημιουργούμε ακόμα ένα νέο επίπεδο (layer) και επιλέγουμε μια πιο σκουρόχρωμη απόχρωση από το χρώμα που επιλέξαμε προηγουμένως (στο βοήθημα χρησιμοποιώ το χρώμα #071f38). Έπειτα με το εργαλείο “ντεγκραντέ” σύρουμε από κάτω προς τα πάνω, όπως φαίνεται στην εικόνα. Σημείωση: Βεβαιωθείτε ότι έχετε επιλεγμένη την επιλογή “Προσκήνιο σε Διαφανές”. Για να κάνετε την γραμμή του ντεγκραντέ ίση, απλά έχετε πατημένο το shift και σύρετε προς τα πάνω.

Βήμα 7

Σε αυτό το σημείο θα κάνουμε ακριβώς τα αντίθετα που κάναμε στο βήμα 6. Συγκεκριμένα δημιουργούμε ένα νέο επίπεδο και επιλέγουμε μια πιο ανοιχτόχρωμη απόχρωση από το αρχικό χρώμα της κάρτας μας (στο βοήθημα χρησιμοποιώ το χρώμα #0054a8). Με το εργαλείο “ντεγκραντέ” και πάλι σύρουμε αυτή τη φορά από πάνω προς τα κάτω.

Βήμα 8

Αφού δημιουργήσουμε ένα επιπλέον layer, επιλέγουμε το “εργαλείο ελλειπτικής επιλογής” και κατασκευάζουμε έναν μακρόστενο κύκλο κατά μήκος της κάρτας. Επιλέγοντας ένα πολύ απαλό χρώμα (#b1d5f9), με την βοήθεια του εργαλείου ντεγκραντέ σύρουμε από πάνω προς τα κάνω, όπως φαίνεται και στην παρακάτω εικόνα και επιπλέον μετακινούμε την τιμή της διαφάνειας του επιπέδου γύρω στο 15%.

Βήμα 9

Τέλος με το εργαλείο ορθογωνίου κατασκευάζουμε ένα ορθογώνιο και το τοποθετούμε πάνω αριστερά. Έπειτα κάνουμε διπλό click πάνω στο ορθογώνιο για να εμφανιστεί το μενού επιλογών “στυλ επιπέδου”. Προσθέστε τα εφέ, σκιά και επικάλυψη ντεγκραντέ σύμφωνα με τις παρακάτω εικόνες.

Βήμα 10

Από εδώ και πέρα μπορείτε πια να προσθέσετε το δικό σας logo και τις δικές σας προσωπικές πληροφορίες. Το τελικό αποτέλεσμα της κάρτας μας θα είναι κάπως έτσι.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Βήμα 1

Ξεκινάμε δημιουργώντας ένα νέο καμβά (500 x 300 pix.) και εισάγουμε ένα κείμενο.

Βήμα 2

Κάνουμε δεξί click στο κείμενο που δημιουργήσαμε και επιλέγουμε το “Ραστεροποίηση κειμένου” (rasterize layer).

Βήμα 3

Στην συνέχεια, έχοντας επιλεγμένο το κείμενο, πηγαίνουμε στην επεξεργασία/μετασχηματισμός/προοπτική (edit/transform/perspective) και μετακινούμε το κείμενό μας οριζόντια.

Βήμα 4

Για να κάνετε πιο όμορφο το τρισδιάστατο κείμενό σας, μπορείτε προαιρετικά να επιλέξετε επεξεργασία/μετασχηματισμός/παραμόρφωση (edit/transform/distort) και να μετακινήσετε προς τα μέσα την μια γωνία του κειμένου σας.

Βήμα 5

Σε αυτό το σημείο, έχοντας πάντα επιλεγμένο το κείμενό μας, κρατάμε πατημένο από το πληκτρολόγιο μας το αριστερό ctrl + alt και πατάμε γύρω στις 20 με 25 φορές το πάνω βελάκι (ο αριθμός είναι ενδεικτικός, καθώς εάν δημιουργήσετε ένα μεγαλύτερο κείμενο οι 20 φορές ίσως είναι λίγες και πιθανόν να επαναλαμβάνετε την διαδικασία μέχρι να φτάσετε στις 30 με 35 φορές). Θα δείτε ότι το κείμενο να παίρνει όγκο.

Βήμα 6

Τώρα επιλέξτε όλα τα επίπεδα (layers) που δημιουργήσατε, εκτός από το πρώτο και το τελευταίο και πηγαίνετε στο επίπεδο/συγχώνευση επιπέδων (layer/merged linked).

Βήμα 7

Τέλος μπορείτε πια να δώσετε χρώμα στο τρισδιάστατο κείμενό σας, κάνοντας διπλό click στο layer που κάνατε συγχώνευση (merged linked), επιλέγοντας το “επικάλυψη ντεκαρτέ” (gradient overlay) για να δείτε την διαφορά.

Σημείωση: Μπορείτε επίσης να προσθέσετε περισσότερα εφέ στο κείμενο σας μέσα από το μενού στιλ επιπέδου (layer style).

Τελικό Αποτέλεσμα

Ακολουθήστε και εσείς τα βήματα και δείξτε μας τι μπορείτε να φτιάξετε…

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Πρώτα από όλα θα δημιουργήσουμε τον καμβά μας. Ανοίγουμε ένα νέο αρχείο μεγέθους 580×450 pixels. Βάφουμε την επιφάνεια με κάποιο χρώμα και μετά επιλέγουμε τα Blending Options του layer και κάνουμε τις εξής ρυθμίσεις

Βήμα 2

Χρησιμοποιώντας το Ellipse Tool και κρατώντας το shift πατημένο θα δημιουργήσουμε έναν κύκλο στο κέντρο του καμβά μας

Βήμα 3

Επιλέγοντας το Direct Selection Tool και πατώντας πάνω στον κύκλο μας μπορούμε να δούμε τα τέσσερα σημεία τα οποία τον αποτελούν. Εμείς θα επιλέξουμε τα δύο νοτιοανατολικά σημεία.

Επιλέγουμε λοιπόν το ένα σημείο και κρατώντας πατημένο το Alt φέρνουμε τον κάτω οδηγό μέχρι το δεύτερο σημείο μας

Κάνουμε το ίδιο και για το κάτω σημείο του κύκλου μας

Βήμα 4

Δημιουργούμε τώρα έναν δεύτερο κύκλο με το Ellipse Tool και μετά επιλέγουμε το Rectangle Tool και πατάμε το μείον στο πληκτρολόγιο μας (-). Τώρα δημιουργούμε ένα παραλληλόγραμμο πάνω από τον δεύτερο μας κύκλο. Με το μείον (-) επιλεγμένο, ουσιαστικά αφαιρούμε από τον κύκλο το τετράγωνο και έτσι μένουμε με ένα μέρος του κύκλου μονο

Βήμα 5

Μετά, χρηστιμοποιόντας το Transform Tool (Ctrl+T) περιστρέφουμε το νέο μας σχήμα και το φέρνουμε να ταιριάξει με τον κύκλο μας

Βήμα 6

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

Έτσι φτάνουμε στο παρακάτω αποτέλεσμα

Βήμα 7

Επόμενο μας βήμα είναι να δώσουμε χρώμα στο αυτοκόλλητο μας. Έτσι λοιπόν ανοίγουμε τα Blending Options του μεγάλου κύκλου μας και κάνουμε τα εξής

Βήμα 8

Τώρα θα δημιουργήσουμε έναν φωτισμό για το αυτοκόλλητο μας. Δημιουργούμε λοιπόν έναν νέο κύκλο και μετ το Direct Selection Tool επιλέγουμε το κάτω σημείο του και πατάμε δεξί κλίκ και Delete Anchor Point

Μετά με τον τρόπο που είδαμε στο βήμα 3 κάνουμε το σχήμα μας κάπως έτσι

Βήμα 9

Εδώ είναι λίγο περίπλοκο για αρχάριους οπότε διαβάστε προσεκτικά.

Μετά, επιλέγουμε στο Layer μας να βάλουμε μια μάσκα (1). Επιλέγουμε το Gradient Tool (2) και μετά το χρώμα μας από μάυρ0 σε άσπρο, την επιλογή Radial Gradient, και το Reverse (3). Τέλος με το Gradient Tool προσπαθούμε να κάνουμε την μάσκα μας όπως στην εικόνα που ακολουθεί (4)

Αφού λοιπόν έχουμε ολοκληρώσει το παραπάνω βήμα, επιλέγουμε τέλος το Blend Mode του layer σε Overlay

Βήμα 10

Με το Transform Tool θα φέρουμε τον φωτισμό μας πάνω στον κύκλο και θα τον περιστρέψουμε μέχρι να ταιριάξει. Τελευταίο βήμα είναι να προσθέσουμε το κείμενο μας με ότι εφέ θέλουμε εμείς και αυτό ήταν.

Τελικό Αποτέλεσμα

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Θα ξεκινήσουμε δημιουργόντας ένα νέο κενό καμβά. Χρησιμοποιόντας το Elipse Tool (U) και πατώντας το shift δημιουργούμε έναν κύκλο. Επιλέγοντας το layer με τον κύκλο, κάνουμε δεξί κλικ και επιλέγουμε Blending Options

Βήμα 2

Στην καρτέλα που μας εμφανίζεται, επίλέγουμε 50% Fill Opacity

Βήμα 3

Στο Color Overlay, επιλέγουμε για χρώμα το μαύρο, και Opacity 50%

Βήμα 4

Στο Stroke επιλέγουμε μαύρο χρώμα, Position inside, και Size 2 εώς 10 pixels.

Βήμα 5

Έχοντας δημιουργήσει λοιπόν τον διαφανή κύκλο μας με το μαύρο περίγραμμα, επιλέγουμε Edit>Define Brush Pattern. Ονομάζουμε το brush με το όνομα που θέλουμε.

Βήμα 6

Ανοίγουμε το Windows>Brushes και κάνουμε τις ακόλουθες ρυθμίσεις

Οι παραπάνω ρυθμίσεις θα δώσουν στην βούρτσα μας τις ιδιότητες που χρειαζόμαστε για να δημιουργήσουμε το εφέ μας.

Βήμα 7

Δημιουργούμε ένα νέο layer και χρησιμοποιόντας τα blending options δίνουμε το εξής χρώμα με τις εξής ιδιότητες.

Βήμα 8

Δημιουργούμε ένα νέο κενό layer, και χρησιμοποιόντας την βούρτσα που μόλις δημιουργήσαμε, κάνουμε κλικ ώστε να δημιουργηθούν κύκλοι σε διάσπαρτα σημεία.

Βήμα 9

Επιλέγουμε για Mode το Screen

Βήμα 10

Με επιλεγμένο το layer με τους κύκλους επιλέγουμε Filter>Blur>Gaussian Blur και κάνουμε τις εξής ρυθμίσεις

Βήμα 11

Επαναλαμβάνοντας τα βήματα 8 εως 10 φτάνουμε στο τελικό μας αποτέλεσμα.

Μπορούμε αλλάζοντας τον χρωματισμό του background μας να φτάσουμε σε πολλά διαφορετικά