GreekTuts » Στράτος Ιορδανίδης http://greektuts.net Ελληνικά Βοηθήματα Mon, 30 Jan 2012 13:52:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Δημιουργήστε ένα απίθανο κουμπί με το Photoshophttp://greektuts.net/create-an-awesome-button-with-photoshop/ http://greektuts.net/create-an-awesome-button-with-photoshop/#comments Thu, 09 Sep 2010 07:00:27 +0000 Στράτος Ιορδανίδης http://greektuts.net/?p=4174 Τελικό Αποτέλεσμα

button_final

Βήμα 1

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

step001

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

step002

step003

step004

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

step005

Βήμα 2

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

step006

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

step007

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

step008

Βήμα 3

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

step009

step010

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

step011

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

step012

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

step013

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

step014

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

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

button_final

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

download

]]> http://greektuts.net/create-an-awesome-button-with-photoshop/feed/ 7 Δημιουργία μενού πλοήγησης με τα CSS3http://greektuts.net/css3-menu/ http://greektuts.net/css3-menu/#comments Tue, 30 Mar 2010 23:42:57 +0000 Στράτος Ιορδανίδης http://greektuts.net/?p=3046 Σε προηγούμενο βοήθημα είδαμε πως μπορούμε να δημιουργήσουμε ένα μενού πλοήγησης στο Photoshop. Ας μετατρέψουμε τώρα αυτό το γραφικό σε λειτουργικό μενού με html και css.

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

Για την δημιουργία του μενού θα χρειαστούμε τα εξής:

  • Την εικόνα bg.jpg για το φόντο
  • Ένα μικρό πλαίσιο
  • και σκιά

HTML

Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:

<!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" />
<title>Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</body>
</html>

CSS

Ας δώσουμε ζωή στο μενού μας.

Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:

#nav-menu{
background: url(bg.jpg) no-repeat;
width: 901px;
height: 62px;
border: 1px solid #000000;
border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#nav-menu ul{
list-style: none;
padding: 0;
margin: 0;
width: 901px;
height: 62px;
}
#nav-menu li{
float: left;
margin: 0 0.15em;
}
#nav-menu li a{
height: 4em;
line-height: 3.6em;
float: left;
width: 6.7em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
}
#nav-menu li a:hover{
background-color: rgba(0, 0, 0, 0.2);
height: 60px;
}

Επίσης, δημιουργούμε ένα ακόμα αρχείο με το όνομα ie.css και γράφουμε:

#nav-menu{
border: none;
}
#nav-menu li a:hover{
background-color: #000;
}

(αυτό θα βελτιώσει την εμφάνιση του μενού στον Internet Explorer)

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

]]> http://greektuts.net/css3-menu/feed/ 1 Δημιουργία Web2.0 Button με τα CSS3http://greektuts.net/create-a-web2-button-with-css3/ http://greektuts.net/create-a-web2-button-with-css3/#comments Fri, 12 Mar 2010 11:10:35 +0000 Στράτος Ιορδανίδης http://greektuts.net/?p=2829 Αν δούμε στο βοήθημα για το πως μπορούμε να φτιάξουμε ένα Web 2.0 κουμπί στο Photoshop, θα μπορέσουμε να καταλήξουμε σε ένα γραφικό. Σε αυτό εδώ το βοήθημα θα δούμε πως μπορούμε να φτιάξουμε το ίδιο κουμπί, αλλά αυτή τη φορά χρησιμοποιόντας html και css.

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

Για την δημιουργία του κουμπιού θα χρειαστούμε τα εξής:

  • Ένα ντεγκρατνέ για το φόντο
  • Στρογγυλοποιημένες γωνίες
  • Ένα μικρό πλαίσιο
  • Σκιά
  • Και σκιά για το κείμενο μας

HTML

Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:

<!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,projection" />
<title>CSS3 Button</title>
</head>
<body>

Button
</body>
</html>

CSS

Αφού έχουμε το κουμπί μας έτοιμο ώρα να του δώσουμε και χρώμα

Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:

.css3button a {
background:url("background.gif") repeat-x scroll center bottom #0DB9E9;
padding: 5px 10px 5px 10px;
text-align: center;
font-weight: bold;
color: #006D85;
text-decoration: none; border: 1px inset #aaa;
-webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;  -khtml-border-radius: 8px;  border-radius: 8px;
-moz-box-shadow: 0 0 0 #666666;
-webkit-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
border: 1px solid #106176;
}
.css3button a:hover  {
background: #ffffff;
text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}

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

]]> http://greektuts.net/create-a-web2-button-with-css3/feed/ 1 Δημιουργία μενού πλοήγησης με το Adobe Photoshophttp://greektuts.net/create-navigation-menu-in-photoshop/ http://greektuts.net/create-navigation-menu-in-photoshop/#comments Thu, 04 Mar 2010 22:32:04 +0000 Στράτος Ιορδανίδης http://greektuts.net/?p=2779 Παρακάτω θα δούμε πως μπορούν να δημιουργήσουμε ένα μενού πλοήγησης με το Adobe Photoshop. Είναι σχετικά εύκολο και γρήγορο.

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

menu_final

Βήμα 1: Δημιουργία νέας εικόνας

Αρχικά δημιουργήστε μια νέα εικόνα με πλάτος 920 και μήκος 170 pixels.

menu_final

Βήμα 2: Μενού πλοήγησης

Φτιάξτε έναν καινούργιο layer Layer > New > Layer … και ονομάστε τον “Menu“. Ορίστε ως foreground color το χρώμα #1Ε1Ε1Ε και πάρτε το Rounded Rectangle Tool, μετά ορίστε το radius σε 6 px και ζωγραφίστε το μενού όπως το παράδειγμα παρακάτω.

draw_menu

Βήμα 3: Δώστε στυλ στο μενού πλοήγησης

Ξεκινήστε από το Layer > Layer Style > Blending Options… και επιλέξτε τοOuter Glow. Ακολουθήστε τις παρακάτω ρυθμίσεις.

outer_glow

Μετά επιλέξτε Gradient Overlay και ακολουθήστε τις παρακάτω ρυθμίσεις.

gradient_overlay

Βήμα 4: Προσθήκη κειμένου

Αρχικά ορίστε το foreground color σε #FFFFFF (άσπρο). Επιλέξτε το Horizontal Type Tool, ως γραμματοσειρά την Myriad Pro (Regular) ή την Arial και 14 pt μέγεθος.

Γράψτε κάποιες λέξεις όπως “Home“, “About“, “Blog” κ.α. και ανοίξτε τα blending options Layer -> Layer Style -> Blending Options…. Ακολουθήστε τις παρακάτω ρυθμίσεις.

drop_shadow

Τώρα το μενού σας πρέπει να είναι κάπως έτσι:

example

Βήμα 5: Προσθήκη ενός σχεδίου

Με ένα σχέδιο το μενού μας θα φαίνεται καλύτερο. Κατεβάστε την παρακάτω εικόνα: Paint canvas texture και ανοίξτε την. Επιλέξτε την (Ctrl + A) και αντιγράψτε την (Ctrl + C).  ΠΡΟΣΟΧΗ: τo παρακάτω μέρος είναι λίγο δυσνόητο και αν δεν έχετε το επιθυμητό αποτέλεσμα με την πρώτη προσπάθεια, παρακαλώ διαβάστε το ξανά και ξανά. Φτιάξτε έναν καινούργιο layer Layer > New > Layer… και κάντε επικόληση (Ctrl + V). Μετά κρατήστε πατημένο το Ctrl και κάνε ένα κλικ στον layer “Menu” για να επιλέξετε το σχήμα του. Ενώ έχετε επιλεγμένο το σχήμα του layer “Menu”, κάντε κλικ στον layer με το σχέδιο και αντιγράψτε τον (Ctrl + C). Μετά κρύψτε αυτόν τον layer (με το σχέδιο) και κάντε επικόλληση (Ctrl + V). Το αποτέλεσμα:

example2

Μετά απλά ακολουθήστε τις παρακάτω ρυθμίσεις.

blending

Αποτέλεσμα:

example3

]]> http://greektuts.net/create-navigation-menu-in-photoshop/feed/ 8