Δημιουργούμε ένα αρχείο dbconn.php με τον παρακάτω κώδικα

<?php
function dbconnect() {
// Σύνδεση με διακομιστή
$db_connect = mysql_connect("localhost", "db_user", "db_password")
or die ("Αποτυχία σύνδεσης στον διακομιστή");
// Αν χρησιμοποιείτε κωδικοποίηση utf8 και δεν σας εμφανίζει σωστά τα
ελληνικά
// mysql_query("SET NAMES 'utf8'", $db_connect);
// Επιλογή βάσης δεδομένων
$db_select = mysql_select_db("db_name", $db_connect)
or die ("Αποτυχία επιλογής βάσης δεδομένων");
}
?>

Με το παρακάτω, συνδεόμαστε στην mysql

mysql_connect("localhost", "db_user", "db_password")

Μην ξεχάσετε να αντικαταστήσετε τα localhost ο host της βάσης db_user το όνομα του χρήστη της βάσης db_password ο κωδικός του χρήστη της βάσης db_name το όνομα της βάσης. or die (“Αποτυχία σύνδεσης στον διακομιστή”); Αν για κάποιο λόγο παρουσιαστεί πρόβλημα, εμφανίζεται το μήνυμα “Αποτυχία σύνδεσης στον διακομιστή”. Κάποιες φορές, όταν η βάση είναι κωδικοποιημένη σε utf8, τα ελληνικά γράμματα εμφανίζονται με ερωτηματικά. Για να το διορθώσουμε, εισάγουμε το παρακάτω:

mysql_query("SET NAMES 'utf8'", $db_connect);

Τέλος επιλέγουμε το όνομα της βάσης

$db_select = mysql_select_db("db_name", $db_connect)

Διευκολύνει να έχουμε την παραπάνω συνάρτηση σε ξεχωριστό αρχείο, και όποτε τη χρειαζόμαστε να το εισάγουμε. Έτσι, αν θέλουμε να αλλάξουμε για παράδειγμα τον κωδικό ή τον χρήστη, το κάνουμε σε ένα αρχείο. Για να εισάγουμε το αρχείο της συνάρτησης σε ένα άλλο αρχείο php χρησιμοποιούμε την εντολή include() ως εξής:

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();

ΕΝΤΟΛΕΣ

// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Αν και δεν είναι απαραίτητο να κάνουμε αποσύνδεση, καλό θα ήταν να μην το ξεχνάμε.

Προσθήκη και ενημέρωση εγγραφών σε βάση δεδομένων

Έστω ο πίνακας clients (id, name, surname) με το id ρυθμισμένο σε auto_increment ώστε να αυξάνεται μόνο του με κάθε εγγραφή που προσθέτουμε. Αρχικά δημιουργούμε ένα αρχείο add.php ή update.php και καλούμε τη συνάρτηση που δημιουργήσαμε πριν, ώστε να συνδεθούμε στη βάση δεδομένων.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
…
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στη συνέχεια με τον παρακάτω κώδικα δηλώνουμε τι θέλουμε να εισάγουμε και που.

// Προσθήκη δεδομένων
$qAdd = mysql_query("INSERT INTO clients (id, name, surname)
VALUES ('', 'Νίκος', 'Παπανικολάου')") or die
("Παρουσιάστηκε πρόβλημα κατά την εισαγωγή των αρχείων."));
if ($qAdd)
{
echo "Τα δεδομένα προστέθηκαν.";
}

Ενώ με τον παρακάτω τι θέλουμε να αλλάξουμε/επεξεργαστούμε.

// Ενημέρωση δεδομένων
$qUpdate=mysql_query("UPDATE clients SET name = 'name', surname =
'surname' WHERE id='1' ");
if ($qUpdate)
{
echo "Τα δεδομένα ενημερώθηκαν.";
}

Έτσι το αρχείο add.php παίρνει την παρακάτω μορφή,

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Προσθήκη δεδομένων
$qAdd = mysql_query("INSERT INTO clients (id, name, surname)
VALUES ('', 'Νίκος', 'Παπανικολάου')") or die
("Παρουσιάστηκε πρόβλημα κατά την εισαγωγή των αρχείων."));
if ($qAdd)
{
echo "Τα δεδομένα προστέθηκαν.";
}
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Ενώ το update.php την παρακάτω:

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Ενημέρωση δεδομένων
$qUpdate=mysql_query("UPDATE clients SET name = 'name', surname =
'surname' WHERE id='1' ");
if ($qUpdate)
{
echo "Τα δεδομένα ενημερώθηκαν.";
}
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Εμφάνιση εγγραφών από βάση δεδομένων

Αρχικά δημιουργούμε ένα αρχείο index.php και καλούμε τη συνάρτηση που δημιουργήσαμε πριν, ώστε να συνδεθούμε στη βάση δεδομένων.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
…
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στη συνέχεια με τον παρακάτω κώδικα «τραβάμε» τα αποτελέσματα από την βάση μας.

// Ερώτημα προς την βάση
$q=mysql_query("SELECT * FROM clients ");
$num = mysql_num_rows($q);
// Αν υπάρχουν αποτελέσματα
if ($num > 0 ) {
$i=0;
while ($i < $num) {
// Δημιουργία σύντομων ονομάτων μεταβλητών
$name = mysql_result($q,$i,"name");
$surname = mysql_result($q,$i,"surname");
// Εκτύπωση μεταβλητών
echo "Όνομα: $name<br />";
echo "Επώνυμο: $surname <br />";
// Αν δεν υπάρχουν αποτελέσματα
++$i; } } else { echo "Δεν έχουν καταχωρηθεί δεδομένα για εσάς ακόμα."; }

Έτσι το αρχείο παίρνει την παρακάτω μορφή.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Ερώτημα προς την βάση
$q=mysql_query("SELECT * FROM clients ");
$num = mysql_num_rows($q);
// Αν υπάρχουν αποτελέσματα
if ($num > 0 ) {
$i=0;
while ($i < $num) {
// Δημιουργία σύντομων ονομάτων μεταβλητών
$name = mysql_result($q,$i,"name");
$surname = mysql_result($q,$i,"surname");
// Εκτύπωση μεταβλητών
echo "Όνομα: $name<br />";
echo "Επώνυμο: $surname <br />";
// Αν δεν υπάρχουν αποτελέσματα
++$i; } } else { echo "Δεν έχουν καταχωρηθεί δεδομένα για εσάς ακόμα."; }
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Μπορούμε να συμπεριλάβουμε και διάφορα κριτίρια στην αναζήτησή μας, όπως αν το όνομα είναι «Νίκος». Αυτό γίνεται προστέτοντας στο mysql query το WHERE name=’Νίκος’

$q=mysql_query("SELECT * FROM clients WHERE name=’Νίκος’");

Διαγραφή εγγραφών από βάση δεδομένων

Αρχικά δημιουργούμε ένα αρχείο delete.php και καλούμε τη συνάρτηση που δημιουργήσαμε πριν, ώστε να συνδεθούμε στη βάση δεδομένων.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
…
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στη συνέχεια με τον παρακάτω κώδικα δηλώνουμε τι θέλουμε να διαγράψουμε.

// Αφαίρεση δεδομένων
$qRemove = mysql_query("DELETE FROM clients WHERE id='1' ");
if ($qRemove)
{
echo "Τα δεδομένα αφαιρέθηκαν.";
}
Έτσι το αρχείο παίρνει την παρακάτω μορφή.
<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Αφαίρεση δεδομένων
$qRemove = mysql_query("DELETE FROM clients WHERE id='1' ");
if ($qRemove)
{
echo "Τα δεδομένα αφαιρέθηκαν.";
}
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

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

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

Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη jQuery και την επιπλέον βιβλιοθήκη jQueryUI. Στον οδηγό μας θα χρησιμοποιήσουμε αυτές τις δύο βιβλιοθήκες της Javascript για να προσθέσουμε την λειτουργία drag n drop στα παράθυρα μας. Επισκεπτόματε την ιστοσελίδα http://jqueryui.com/download και κατεβάζουμε το πακέτο ώς είναι. Έτσι θα έχουμε 2 αρχεία, το jquery-1.3.2.min.js και το jquery-ui-1.7.2.custom.min.js. Μετά τα αποθηκεύουμε μαζί με τα αρχεία της ιστοσελίδας μας αλλά σε έναν νέο φάκελο με το όνομα scripts.

Βήμα 2

Ανοίγουμε το index.html που φτιάξαμε χτές, και μέσα στο <head> γράφουμε

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Έτσι συμπεριλαμβάνουμε τα δύο αρχεία που κατεβάσαμε, και λέμε στην ιστοσελίδα μας να τα φορτώσει κατά την εκκίνηση.

Βήμα 3

Πρίν κάνουμε οτιδήποτε άλλο, ας προσθέσουμε το περιεχόμενο στην σελίδα μας. Στο <body> του αρχείου index.html και πιο συγκεκριμένα μέσα στο div content προσθέτουμε

<div class="column">
<div class="widget">
<h3>Τελευταία Άρθρα</h3>
<p><strong>Μαθήματα ECDL</strong><br />Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. <a href="#">Περισσότερα...</a></p>
<p><strong>Eiσαγωγή στην PHP Μέρος 2</strong><br />Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.<a href="#">Περισσότερα...</a></p>
<p><strong>Δημιουργήστε το δικό σας sticker</strong><br />Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.<a href="#">Περισσότερα...</a></p>
</div>
<div class="widget">
<h3>Γράψτε για το GreekTuts</h3>
<p>Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.</p>
</div>
<div>
<h3>Συνεντεύξεις</h3>
<p><strong>Συνέντευξη με τον Γεράσιμο Τσιάμαλο</strong><br />O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. <a href="#">Περισσότερα...</a></p>
</div>
</div>
<div id="featured">
<h2>Δωρεάν Μαθήματα ECDL</h2>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.</p>
</div>
<div class="column">
<div class="widget">
<h3>Γίνε Συνδορμητής Στο GreekTuts</h3>
<p>Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.</p>
</div>
<div class="widget">
<h3>RSS Feed</h3>
<strong>Μαθήματα ECDL</strong>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.</p>
</div>
<div class="widget">
<h3>Επικοινωνία...</h3>
<p>Επικοινωνήστε μαζί μας</p>
<input type="text" value="Όνομα..." />
<input type="text" value="Email..." />
<textarea rows="4" cols="20" value="Μήνυμα..."></textarea>
</div>
</div>
<div class="column">
<div class="widget">
<h3>Οι Φίλοι μας στο Twitter</h3>
<center><img src="styles/twitt.png"></img></center>
</div>
</div>

Έτσι δημιουργούμε 3 στήλες, με 3 blocks στις 2 πρώτες, και 1 block στην τρίτη. Columns είναι οι στήλες και widgets τα blocks.

Βήμα 4

Ανοίγουμε το screen.css στον φάκελο styles, και προσθέτοντας τον εξής κώδικα θα δώσουμε μορφή στο περιεχόμενο μας

#featured {
width:                    592px;
padding:                6px;
margin:                    6px;
margin-left:            18px;
margin-top:                16px;
float:                    left;
height:                    200px;
background:                #333333 url("accent.jpg") no-repeat scroll -200px -40px;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
}

#featured h2 {
margin-left:            340px;
color:                    #ffffff;
font-size:                20px;
font-weight:            bold;
}

#featured p {
margin-left:            342px;
color:                    #ffffff;
}

.column {
width:                    290px;
padding:                6px;
margin:                    0;
margin-left:            12px;
float:                    left;
min-height:                300px;
height:                    100%;
}

.widget {
position:                relative;
padding:                6px;
margin:                    0;
margin-top:                10px;
background:                #f3f3f3 url(grad1.png) no-repeat top right;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
min-height:                30px;
overflow:                hidden;
border:                    1px solid #C9C9C9;
}
.widget h3 {
margin-top:                -6px;
color:                    #0f57bb;
font-size:                1.6em;
line-height:            2em;
font-weight:            normal;
border-bottom:            1px solid #999999;
background:                transparent url(movable.png) no-repeat center left;
text-indent:            12px;
cursor:                    hand;
text-shadow:            0 1px 0 #FFFFFF;
}

Βήμα 5

Θα χρησιμοποιήσουμε τις εξής εικόνες

accent.jpg

grad1.png

movable.png

twitt.png

Βήμα 6

Τώρα που έχουμε τα πάντα έτοιμα, θα προσθέσουμε την λειτουργία drag n drop. Αυτό το κάνουμε προσθέτοντας στο <head> του index.html και κάτω από τα 2 scripts τον εξής κώδικα

<script type="text/javascript">
$(document).ready(function(){
$(".column").sortable({
connectWith: '.column',
cursor: 'hand',
handle: 'h3',
opacity: 0.2,
change: function(e, i) {
// Post data back to server or update cookie
}
});
$(".widget").append('<div></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes") {
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});

});
</script>

Βήμα 7

Στο screen.css θα προσθέσουμε τον παρακάτω κώδικα, για να διορθώσουμε κάποιες ατέλεις που δημιουργούνται

.widget .close {
width:                    25px;
height:                    25px;
position:                absolute;
top:                    0;
right:                    0;
cursor:                    pointer;
}

.ui-sortable-helper {
border:                    3px solid #0f57bb;
cursor:                    move;

}

Βήμα 8

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

Δείτε παρακάτω το τελικό αποτέλεσμα

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος

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

Βήμα 1

Ας ξεκινήσουμε πρώτα δημιουργώνας την σελίδα μας σε HTML. Ανοίγουμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Μετακινούμενα Παράθυρα μέρος 1ο - GreekTuts.net</title>
<link href="styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<!--
Εδώ θα προσθέσουμε την Javascript στο 2ο μέρος
//-->
</head>
<body>

</body>
</html>

Βήμα 2

Ας προσθέσουμε λοιπόν την επικεφαλίδα την φόρμα αναζήτησης και το μενού πλοήγησης. Στο <body> γράφουμε

<div id="container">

<div id="header">
<h1>GreekTuts</h1>
<input type="text" id="searchbox" value="Αναζήτηση..." />
</div>
<div id="navigation">
<ul>
<li>Κεντρικη</li>
<li>Σχετικα</li>
<li>Blog</li>
<li>Υπηρεσιες</li>
<li>Επικοινωνια</li>
</ul>
</div>

</div>

Βήμα 3

Ας προσθέσουμε και το υποσέλιδο μας. Κάτω ακριβώς από τον παραπάνω κώδικα γράφουμε

<div id="footer">
<ul>
<li>Σχετικά</li>
<li>Υπηρεσίες</li>
<li>Blog</li>
<li>Επικοινωνία</li>
</ul>
<ul>
<li>Άρθρο 1</li>
<li>Άρθρο 2</li>
<li>Άρθρο 3</li>
<li>Άρθρο 4</li>
<li>Άρθρο 5</li>
</ul>
<ul>
<li>Όροι Χρήσης</li>
<li>Απόρητο</li>
<li>Sitemap</li>
</ul>

</div>
<div class="footP">
<p>Σχεδιασμός & Ανάπτυξη : <a href="http://pantso.gr" target="_blank">Pantso</a> για το GreekTuts.net</p>
</div>
</div>

Βήμα 4

Πλέον έχουμε την δομή της σελίδας μας έτοιμη. Ας προσθέσουμε λοιπόν και το στύλ μαζί με εικόνες. Δημιουργούμε ένα αρχείο με το όνομα screen.css και γράφουμε

body {
margin:                    0;
padding:                0;
background:                #9f9f9f;
color:                    #000000;
font-size:                62.5%;
font-family:            arial, helvetica, sans-serif;
}

h1 {
font-family:            helvetica, arial, sans-serif;
margin-left:            12px;
height:                    120px;
width:                    300px;
color:                    #ffffff;
text-indent:            -10000px;
overflow:                hidden;
background:                transparent url(logo.png) center left no-repeat;
}

a {
color:                    #0f57bb;
text-decoration:        none;
}

#searchbox {
position:                absolute;
bottom:                    10px;
right:                    22px;
font-size:                1.8em;
font-weight:            normal;
border:                    1px solid #660000;
color:                    #bdbdbd;
padding:                5px;
bottom:                    40px;
}

h2 {
color:                    #7FA9A5;
font-size:                1.6em;
font-weight:            normal;
}

p {
font-size:                1.2em;
line-height:            1.5em;
}

#container {
margin:                    0;
padding:                0;
position:                relative;
width:                    960px;
margin:                    auto;
background:                #ffffff;
border-left:            10px solid white;
border-right:            10px solid white;
border-bottom:            10px solid white;
top:                    -20px;
}

#header {
margin:                    0;
padding:                0;
position:                relative;
width:                    960px;
height:                    120px;
background:                #0f57bb url(headerbg.png) repeat-x top left;
}

#navigation {
background:                transparent url(navbg.png) repeat-x top left;
height:                    35px;
margin-top:                2px;
margin-bottom:            2px;
}

#navigation ul {
margin:                    0;
padding:                0;
}

#navigation ul li {
list-style:                none;
font-size:                1.7em;
text-transform:            uppercase;
float:                    left;
padding-left:            41px;
padding-right:            41px;
line-height:            35px;
color:                    #aeaeae;
border-right:            1px inset #cdcdcd;
cursor:                    pointer;
}

#navigation ul li:hover {
background:                #394eb8;
color:                    #ffffff;
}

#content {
margin-top:                1px;
padding-top:            12px;
background:                #dddddd;
float:                    left;
width:                    960px;
padding-bottom:            12px;
min-height:             300px;
}
#footer {
height:                    100px;
background:                #313131;
color:                    #ffffff;
border-top:                2px solid #ffffff;
clear:                    left;
}

#footer ul {
margin:                    0;
padding:                0;
margin-top:                10px;
float:                    left;
width:                    290px;
padding-left:            12px;
margin-left:            12px;
border-left:            1px solid white;

}

#footer ul li {
list-style:                none;
text-transform:            uppercase;
line-height:            2em;
font-size:                0.8em;
}

.footP {
margin:                    0 auto;
text-align:                center;
}

Βήμα 5

Οι εικόνες που θα χρησιμοποιήσουμε είναι οι εξής

logo.png

headerbg.png

navbg.png

Συμπεριλαμβάνουμε τις εικόνες και το screen.css σε έναν φάκελο με το όνομα styles και αυτό ήταν! Πλέον έχουμε έτοιμη την σελίδα μας τόσο δομικά όσο και στυλιστικά. Δείτε παρακάτω ένα demo του τι έχουμε κάνει μέχρι τώρα στο πρώτο μέρος.

Στο δεύτερο μέρος, αύριο, θα δούμε πως θα προσθέσουμε το περιεχόμενο μας, και πως θα κάνουμε τα διάφορα blocks να δέχονται drag n drop, ώστε να μπορούμε να τα μετακινούμε μέσα στην ιστοσελίδα, και να τα ανακατανέμουμε όπως εμείς θέλουμε.

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος

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

Πρώτα από όλα θα δημιουργήσουμε τον καμβά μας. Ανοίγουμε ένα νέο αρχείο μεγέθους 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 με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Δείτε τι περιέχει το σετ

Όλοι μας οι συνδρομητές μπορούν να κατεβάσουν τα εικονίδα από τον σύνδεσμο που ακολουθεί.

Δεν  είστε συνδρομητής; Μάθετε περισσότερα για τις συνδρομές στο GreekTuts.net εδώ

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

Μαζί με τα εικονίδια θα βρείτε :

• To .psd αρχείο το οποίο μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε νέα εικονίδια
• Το κάθε εικονίδιο σε .icns αρχείο για MAC
• Το κάθε εικονίδιο σε .png αρχείο(256×256 px)

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