Slate
Blackcurrant
Watermelon
Strawberry
Orange
Banana
Apple
Emerald
Chocolate
Marble
Slate
Blackcurrant
Watermelon
Strawberry
Orange
Banana
Apple
Emerald
Chocolate
Marble
Anastasis
-
Content Count
304 -
Joined
-
Last visited
-
Days Won
2 -
Feedback
N/A
Everything posted by Anastasis
-
Ένα παράδειγμα χρήσης της CSS3, για το πώς δημιουργούμε divs με καμπύλες γωνίες και διχρωμία. κώδικας: /*General position and size settings*/ float:left; width:250px; /*Font/Text Settings*/ font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 10pt; color: #888888; text-align: justify; padding: 10px; /* Rounded Corners */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Background and border color*/ background-image: -moz-linear-gradient(top, #FFFFFF, #E6E6FA); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.0, #E6E6FA)); border: 1px solid #D3D3D3; background-color: #DDDDDD; 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 και αντιγράφουμε τον παρακάτω κώδικα. κώδικας: <!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>Untitled Document</title> </head> <body> </body> </html> Το αρχείο αυτό θα το αποθηκεύσουμε μέσα στο φάκελο page με όνομα index.html όπως βλέπουμε στην παρακάτω εικόνα. 4. Με το Notepad δημιουργούμε ένα ακόμα αρχείο και το αποθηκεύουμε στο φάκελο page με όνομα layout.css. 5. Στο αρχείο index.html εισάγουμε την παρακάτω γραμμή κάτω από τη γραμμή <title>Untitled Document</title> κώδικας: <link href="layout.css" rel="stylesheet" type="text/css" /> Με αυτό τον τρόπο συνδέουμε το αρχείο Css με το αρχείο Html 6. Ας αλλάξουμε και το αντιαισθητικό <title>Untitled Document</title> σε κώδικας: <title>Smashing Dzine</title> Μέχρι τώρα έχουμε λοιπόν: Ένα φάκελο page που περιέχει ένα φάκελο με όνομα images, ένα αρχείο με όνομα index.html και ένα αρχείο με όνομα layout.css Το φάκελο images που περιέχει τις εικόνες που κατεβάσαμε. Τα συνδεδεμένα αρχεία index.html και layout.css Το βασικό σκελετό html μέσα στο index.html Αύριο θα δημιουργήσουμε το βασικό σκελετό της ιστοσελίδας και την περιοχή του Header
-
jQuery λειτουργικότητα!!! παράθεση: Σημείωση:Σε αυτό το μέρος θα αναλύσουμε τη χρήση της jQuery και θα σας δείξουμε πώς μπορείτε να ενσωματώνετε ένα plugin στη σελίδα σας.Όμως δεν θα μπούμε σε λεπτομέρειες όπως configuration του plugin σε βάθος.Θα έχανε όλο το νόημα του το tutorial αυτό. Το πρώτο πράγμα που θα κάνουμε εδώ είναι να δημιουργήσουμε ένα αρχείο με jQuery κώδικα και αυτό θα ελέγχει: 1)Εάν φορτώθηκε η σελίδα μας. 2)Τι θα συμβεί εάν πατήσουμε το κουμπί του slider. 3)Tι θα συμβεί εάν πατήσουμε το το link “close”. 4.)Τι θα συμβεί και πώς θα ελέγχουμε το περιεχόμενο της div που θα ανοίγει ανάλογα με το εικονίδιο που πατάμε. Στον φάκελο “js” που προαναφέραμε αποθηκεύουμε ένα αρχείο jQuery-το ονομάζουμε “hideDiv.js“..Αφού δημιουργήσουμε το αρχείο αυτό θα το καλέσουμε και στο head της σελίδας μας,εννοείται!Αλλιώς δεν θα τρέχει ο κώδικας.Επίσης στο head της σελίδας μας θα καλέσουμε το αρχείο της jQuery βιβλιοθήκης το οποίο θα το τοποθετήσουμε στον ίδιο φάκελο και αυτό.Εάν είστε εντελώς αρχάριοι από την jQuery δείτε αυτό το jQuery tutorial. Ας αρχίσουμε λοιπόν με το αρχείο μας “hideDiv.js“. 1.)Έλεγχος για τη φόρτωση όλων των στοιχείων της σελίδας μας.. κώδικας: $(document).ready(function(){ //edw tha mpei olos o allos kwdikas.Prepei panta na elegxoume an exei fortwsei i selida mas prwta!!! }); 2.)Ας ελέγξουμε λίγο το κουμπί μας που ελέγχει το slider. Aλλά πρώτα ας κρύψουμε το panel μας.Στο css αρχείο μέσα στο “#socializeContainer” προσθέστε μία γραμμή κώδικα ακόμα πριν το ‘}’.Την παρακάτω γραμμή: κώδικας: display:none; Το ίδιο ακριβώς κάνουμε και στην κλάση “.content” ώστε να μην φαίνονται οι κρυφές divs. Έτσι όταν δούμε τι σελίδα μας και πάλι ,θα φαίνεται μόνο το κουμπί του panel μας και όχι ολόκληρο το panel.Στην συνέχεια στο αρχείο “hideDiv.js” προσθέστε τον κώδικα ώστε το αρχείο μας να είναι το εξής: κώδικας: $(document).ready(function(){ $(".handler").click(function(){ $("#socializeContainer").slideToggle(1000); }); }); Με την προσθήκη του παραπάνω κώδικα ελέγχουμε το εάν πατηθεί το κουμπί μας -το οποίο βρίσκεται σε div με class handler-Γραμμή 2.Εάν πατηθεί το κουμπί μας το socializeContainer μας -Γραμμή 3-θα ξετυλίγεται ή θα τυλίγεται με ταχύτητα 1 sec το πλήρες άνοιγμα και 1 sec το πλήρες κλείσιμο. 3.)Ας κάνουμε κάτι ποιο tricky εδώ.Θα ελέγχουμε πιο socialIcon πατάμε και ανάλογα θα εμφανίζουμε την κρυφή μας div με τα ανάλογα περιεχόμενα.Όταν για παράδειγμα έχουμε πατήσει το rss εικονίδιο και εν συνεχεία πατάμε το twitter θα γλυστράει προς τα πάνω η κρυφή div και εν συνεχεία θα κατεβαίνει και πάλι κάτω με τα νέα περιεχόμενα μας… Ας δούμε τον κώδικα που θα προσθέσουμε στο αρχείο “hideDiv.js” και θα εξηγήσουμε ! κώδικας: $(".socialIcons").click(function () { $(".content").slideUp(700); var show_the_div = $(this).attr("title"); $("#"+ show_the_div).slideToggle(800); }); Γραμμή 1:Εδώ ελέγχουμε εάν πατηθεί κάτι που έχει κλάση “socialIcons” Δηλαδή μία από τις divs που περιέχει ένα από τα εικονίδια μας!!Εάν πατηθεί θα εκτελεστούν οι γραμμές 2-5. Γραμμή 2:Αυτή η γραμμή κάνει slideUp ,δηλαδή “ανεβάζει προς τα πάνω” το στοιχείο που έχει class = “content”.Αυτή η κλάση είναι η κλάση που εφαρμόζουμε στις 4 div που είναι κρυφές.. Γραμμή 4-5:Εδώ παίζεται όλο το παιχνίδι..Πατώντας εμείς πάνω σε ένα εικονίδιο μας δίνεται η δυνατότητα με την jQuery να παίρνουμε την τιμή από κάποιο attribute(title,id κλπ) του στοιχείου αυτού.Εδώ παίρνουμε τον τίτλο του στοιχείου που περιέχει το εικονίδιο αυτό.Δηλαδή τον τίτλο της div που το περιέχει.Στο παράδειγμά μας όταν πατάμε σε ένα εικονίδιο τότε παίρνουμε τον τίτλο του δηλαδή.Το (this) αναφέρεται στη div που έχει σαν background το εικονίδιο μας-ουσιαστικά το εικονίδιο που πατάμε..Ας θυμηθούμε λίγο τον html κώδικα για τα εικονίδια… κώδικας: <div class="socialIcons" id="rss" title="rssDiv"></div> <div class="socialIcons" id="facebook" title="facebookDiv"></div> <div class="socialIcons" id="twitter" title="twitterDiv"></div> <div class="socialIcons" id="mail" title="mailDiv"></div> Παρατηρείτε ότι κάθε div από τις παραπάνω έχει ένα τίτλο;O τίτλος αυτός δεν είναι τυχαίος.Ο τίτλος “rssDiv” είναι ίδιος με το id της div που περιέχει τη φόρμα για το rss μας.. Με τον κώδικα jQuery κάθε φορά που πατάμε ένα εικονίδιο παίρνουμε τον τίτλο και τον αποθηκεύουμε σε μία μεταβλητή τη “show_the_div“.Στη συνέχεια στη γραμμή 5 είναι ολοφάνερο τι κάνουμε.Δημιουργούμε εμείς το html στοιχείο που θέλουμε να ελέγξουμε βάζοντας “#” που είναι το αναγνωριστικό του id μιας div και την τιμή που είναι μέσα στη μεταβλητή μας.Οπότε αυτόματα ενεργοποιώ την div που θέλω να δείξω και με το “slideToggle” την κάνω ανάλογα είτε slideUp είτε slideDown. Έμεινε μόνο το link που κλείνει την κάθε div.Ας δούμε πως θα μοιάζει το αρχείο μας “hideDiv.js” ολόκληρο! κώδικας: $(document).ready(function(){ $(".handler").click(function(){ $("#socializeContainer").slideToggle(1000); }); //otan klikaroume ena eikonidio $(".socialIcons").click(function () { $(".content").slideUp(700); var show_the_div = $(this).attr("title"); $("#"+ show_the_div).slideToggle(800); }); $(".close").click(function () { $(".content").slideUp(700); }); }); Έτοιμος ο κώδικας.Για να δούμε λίγο το συνολικό head της html σελίδας μας μέχρι στιγμής .. κώδικας: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Archimidis Mertzanos" /> <link rel="stylesheet" href="styles_test.css"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/hideDiv.js"></script> <title>Socialize with us!!</title> </head> Λειτουργία των 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"..Μέσα σε αυτό το αρχείο θα τοποθετήσουμε τον κώδικα : κώδικας: $(function() { $('.boxes a').lightBox(); }); Με τον παραπάνω κώδικα που ουσιαστικά βρήκαμε έτοιμο στη σελίδα του Plugin ορίζουμε ότι όταν πατηθεί το link που υπάρχει μέσα στο html στοιχείο με κλάση “.boxes” να εφαρμοστεί πάνω του το lightbox.Τα link μας είναι ανάμεσα στα : κώδικας: <a></a> tags κώδικας: <!--Prwto image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a> </div> <!--Deytero image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a> </div> <!--Trito image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a> </div> Εννοείται ότι πρέπει να καλέσουμε το αρχείο που δημιουργήσαμε -το "mylightbox.js" αλλά και το αρχείο “jquery.lightbox-0.5.js” στο head της σελίδας μας..Και είμαστε έτοιμοι! παράθεση: Όσον αφορά την ενσωμάτωση του validate plugin κάντε το εσείς σαν άσκηση.Εμείς φυσικά θα σας δώσουμε τα αρχεία του παραδείγματος και μπορείτε να δείτε πως το τοποθετήσαμε και εμείς. Ας δούμε λίγο συνολικά το head της σελίδας μας…Μη σας φοβίζει το scriptaki που υπάρχει--είναι για το validation και χρησιμοποιείται με το validation plugin! κώδικας: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="styles_test.css"/> <link rel="stylesheet" href="jquery.lightbox-0.5.css"/> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/hideDiv.js"></script> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="js/mylightbox.js"></script> <title>Socialize with us!!</title> <!-- ayto to script elegxei to validation --> <script type="text/javascript"> $(document).ready(function() { $("#contactform").validate({ rules: { name: "required",// simple rule, converted to {required:true} email: {// compound rule required: true, email: true }, textarea: { required: true }, } }); }); </script> </head> Επίλογος-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> βάλτε τις παρακάτω γραμμές κώδικα: κώδικας: <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> Στο κάτω μέρος της σελίδας και ακριβώς πάνω από την ετικέτα </body> εισάγετε τις παρακάτω γραμμές κώδικα: κώδικας: <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> Έπειτα μέσα στο αρχείο index.html και μέσα στο div slide θα εισάγουμε το παρακάτω: κώδικας: <div id="slider" class="nivoSlider"> <img src="images/newyork.jpg" title="New York | City Population: 8.391.881" /> <img src="images/seattle.jpg" title="Seattle | City Population: 617.334" /> <img src="images/francisco.jpg" title="San Francisco | City Population: 815.358" /> <img src="images/miami.jpg" title="Miami | City Population: 433.136" /> </div> Ολόκληρος ο κώδικας της σελίδας μέσα στο <body></body>: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p><span class="btext">+971 55 7457383</span></p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="navcontainer"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"> <div id="slider" class="nivoSlider"> <img src="images/newyork.jpg" title="New York | City Population: 8.391.881" /> <img src="images/seattle.jpg" title="Seattle | City Population: 617.334" /> <img src="images/francisco.jpg" title="San Francisco | City Population: 815.358" /> <img src="images/miami.jpg" title="Miami | City Population: 433.136" /> </div> </div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_middle"> <p class="title"><span class="color">Our</span> Services</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_right"> <p class="title"><span class="color">Our</span> Portfolio</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_down"></div> </div> </div> <div id="footer_wrap"> <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <p>Home / About SmashingDzine / Our Services / Portfolio / Blog / Contact Us</p> </div> <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> LIVE DEMO Οι ρυθμίσεις για το slideshow που μας ενδιαφέρουν είναι οι: animSpeed:500 Καθορίζει την ταχύτητα της εναλλαγής της εικόνας pauseTime:3000 Καθορίζει το χρόνο παραμονής της εικόνας που βρίσκονται στο αρχείο jquery.nivo.slider.js Εάν δε θέλετε να εμφανίζονται οι τίτλοι κάτω από τις εικόνες αφαιρέστε την ιδιότητα title από την εικόνα ώστε να γίνει σαν το παρακάτω. κώδικας: title="" Καλή επιτυχία
-
Πρώτα θα δημιουργήσουμε ένα αρχείο για το css το οποίο θα το ονομάσουμε index.css και έπειτα θα δημιουργήσουμε και ένα αρχείο html το οποίο θα το ονομάσουμε index.html. Στην συνέχεια θα συνδέσουμε τα δύο αυτά αρχεία γράφοντας το παρακάτω στο head του index.html: κώδικας: <link href="index.css" rel="stylesheet" type="text/css" /> Θα πρέπει να φροντίσουμε όλα τα αρχεία μας μαζί με τις εικόνες να βρίσκονται στον ίδιο φάκελο. Αφού συνδέσαμε τα αρχεία μας θα αρχίσουμε να γράφουμε το CSS μας. Το πρώτο πράγμα που θα γράψουμε είναι: κώδικας: body { margin: 0; background-image:url(background.gif); background-repeat:repeat-x; } Το margin δηλώνει ότι τα περιθώριά του από όλες τις πλευρές θα είναι μηδενικά, το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό background.gif και το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά. Live demo Στην συνέχεια θα τοποθετήσουμε το κύριο div στο οποίο θα τοποθετηθεί όλη η ιστοσελίδα μας. κώδικας: #container { margin: 0 auto; padding: 0px; width: 781px; height:800px; background-image:url(main_back.gif); } Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο, το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_back.gif Στην συνέχεια μέσα στο body της σελίδας μας θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="container"></div> Live demo Το επόμενο div μας θα είναι το header και στο css αρχείο μας γράφουμε το: κώδικας: #header { background-image:url(main_banner.jpg); width: 780px; height: 117px; margin: 0; padding: 0; } Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά , το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_banner.gif. Στην συνέχεια μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="header"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> </div> Live demo Το επόμενο div μας θα είναι το navigation και στο css αρχείο μας γράφουμε το: κώδικας: #navigation { background-image:url(navbar.jpg); width: 780px; height: 31px; padding-top:9px; } Tο padding-top είναι τα περιθώρια που θα έχει το κείμενο του μενού από το πάνω μέρος του div και αυτό είναι 9 px, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό navbar.gif. Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div header θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="header"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> </div> Live demo Το επόμενο div θα είναι το main_content μέσα στο οποίο θα τοποθετήσουμε όλα τα divs που θα χρησιμοποιήσουμε για το περιεχόμενο της ιστοσελίδας μας. κώδικας: #main_content { background:none; width: 741px; height:600px; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; } Όλα τα padding είναι τα περιθώρια που θα έχει το περιεχόμενο του div από τις 4 πλευρές του και αυτό είναι 20 px (παρατηρήστε ότι το άθροισμα του width και των padding-left και padding-right μας κάνουν 781px,) το Width είναι το πλάτος του και το Height είναι το ύψος του και το background:none δηλώνει ότι δεν θα τοποθετηθεί τίποτα σαν φόντο. Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div navigation θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="main_content"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"></div> </div> Live demo Το επόμενο div θα είναι το retouch δηλαδή το πάνω αριστερά «κουτί» κώδικας: #retouch { float:left; background-image:url(main_retouch.gif); width: 218px; height: 143px; padding-top:40px; text-align:center; line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; } Το 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 id="retouch"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"> <div id="retouch"></div> </div> </div> Προσέξτε που ανοίγει και που κλείνει το κάθε div Live demo Το επόμενο div θα είναι το content1 δηλαδή το «κουτί» που βρίσκεται δεξιά του retouch. κώδικας: #content1 { float:left; background-image:url(main_content1.gif); width: 480px; height: 133px; margin-left:20px; padding-top:40px; padding-bottom:10px; padding-left:10px; padding-right:10px; line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; } Το 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 id="content1"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"> <div id="retouch"></div> <div id="content1"></div> </div> </div> Προσέξτε που ανοίγει και που κλείνει το κάθε div Live demo Το επόμενο div θα είναι το funny δηλαδή το μεσαίο αριστερά «κουτί» κώδικας: #funny { float:left; background-image:url(main_funny.gif); width: 218px; height: 143px; margin-top:20px; padding-top:40px; text-align:center; line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; } Το 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 id="funny"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"> <div id="retouch"></div> <div id="content1"></div> <div id="funny"></div> </div> </div> Προσέξτε που ανοίγει και που κλείνει το κάθε div Live demo Το επόμενο div θα είναι το content2 δηλαδή το «κουτί» που βρίσκεται δεξιά του funny. κώδικας: #content2 { float:left; background-image:url(main_content2.gif); width: 480px; height: 133px; margin-left:20px; margin-top:20px; padding-top:40px; padding-bottom:10px; padding-left:10px; padding-right:10px; line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; text-align:center; } Το 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 id="content2"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"> <div id="retouch"></div> <div id="content1"></div> <div id="funny"></div> <div id="content2"></div> </div> </div> Προσέξτε που ανοίγει και που κλείνει το κάθε div Live demo Το επόμενο div θα είναι το random δηλαδή το κάτω αριστερά «κουτί» κώδικας: #random { float:left; background-image:url(main_funny.gif); width: 218px; height: 143px; margin-top:20px; padding-top:40px; text-align:center; line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; } Το 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 id="random"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"> <div id="retouch"></div> <div id="content1"></div> <div id="funny"></div> <div id="content2"></div> <div id="random"></div> </div> </div> Προσέξτε που ανοίγει και που κλείνει το κάθε div Live demo Τελευταίο div που θα τοποθετήσουμε είναι το footer: κώδικας: #footer { float:left; background-image:url(main_footer.jpg); width: 781px; height: 24px; padding-top:10px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; } Το 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 id="footer"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="main_content"> <div id="retouch"></div> <div id="content1"></div> <div id="funny"></div> <div id="content2"></div> <div id="random"></div> </div> <div id="footer"></div> </div> Προσέξτε που ανοίγει και που κλείνει το κάθε div Live demo
-
Λαθος,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
-
Ένα πολύ χρήσιμο και αγαπημένο tutorial, για αυτά τα halftone σύννεφα. Πολύ χρήσιμα για wallpapers και γενικότερα για background σε flashάκια, designs κτλ. Halftone σύννεφα Βήμα 1 Κάντε μία νέα εικόνα (File -> New) με τις επιθυμητές κατά περίπτωση διαστάσεις. Καθορίστε ως foreground χρώμα το #363636 και ως background χρώμα το #D4D4D4. Εφαρμόστε το Filter -> Render -> Clouds κι έπειτα το Filter -> Render -> Difference Clouds όσες φορές χρειαστεί μέχρι να ικανοποιηθείτε από το αποτέλεσμα. (εδώ 5 φορές) Βήμα 2 Επιλέγουμε το φίλτρο Filter -> Sketch -> Halftone pattern και εισάγετε τις ρυθμίσεις: Επαναλαμβάνετε μία ακόμη φορά με Ctrl+F. Βήμα 3 Εφαρμόζουμε Image -> Adjust -> Hue/Saturation και αφού ενεργοποιήσουμε το Colorize χρωματίζουμε κατά βούληση... (εδώ 86-59-0) Καλό designing!
-
Μικροκουμπιά βλέπω τον τελευταίο καιρό παντού! Σε 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 μέχρι να πετύχουμε το επιθυμητό χρώμα.
