Editors Picks

Εμφάνιση αναρτήσεων με ετικέτα Web Designer Tools. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Web Designer Tools. Εμφάνιση όλων των αναρτήσεων

Κυριακή 13 Ιουνίου 2010

99 Resources for Web 2.0 Design

BADGES

Web 2.0 Badges – A set of free badges to download and use in your own designs.

Fresh Badge – Quickly generate your own badge.

adClustr – Starburst badges.

Deziner Folio – A collection of different badges.

BittBox – Free vector badges.

Official Seal Generator – An alternative to the typical badge.

Photoshop Tutorial – A quick lesson on making your own badge.

Glossy Photoshop Tutorial – Create a glossy badge with this tutorial.


BUTTONS

My Cool Button – A nice online tool that will help you to quickly create the button that you want.

Adam Kalsey’s Button Maker – Simple tool to make your own buttons.

Button Maker from Blog Flux – Create your own custom button.

Brilliant Button Maker – A similar button maker to the previous 2.

CSS Buttons – Choose the text, border, and background.

Buttonator – A paid option for creating buttons.

RSS Button Maker – The name pretty much says it all.

Button Boost – A little bit different than some of the other button generators.

ButtonGenerator.com – Create buttons for navigation menus.

Crystal Button – Slick web buttons made easy.

Chicklet Creator – Create buttons that allow visitors to subscribe in their feed reader of choice.


ROUNDED CORNERS

Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.

RoundedCornr

Corner Shop

Spiffy Box

Canvas Corner

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List


LOGOS

Each of these tools will create a simple web 2.0 style logo.

Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Stylr


ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

Web 2.0 icons

UtomBox – A great collection of web 2.0 icons.

Feed Icons – The standard RSS icon.

Map Icon Factory – Create your own map icon.

Perishable Press – A nice collection of RSS icons.

Glass Style RSS Icons

Snap2Objects – Vector RSS icons.

31 Sources of Quality, Free Icons


GRADIENT IMAGES

Another common element of web 2.0 is gradient images. Here are a few tools to help you.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Speech Bubbles from Will Mayo

Will Mayo

Bubblesnaps

CSS Play

XHTML Speech Bubbles

WigFlip

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

BACKGROUND IMAGES

Background Image Maker – Create background images with choices like transparency and gradients.

Stripe Generator 2.0 – If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer – Easily create striped images.

Tartan Maker – Create a tartan background image.

Texture Generator – Creates textured images that you can use as a background.

All Free Backgrounds – Choose the background you want.

COLORS

The Colors of Web 2.0 – Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete – Popular web 2.o colors.

Color Schemer Gallery – Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers – More samples of color combinations.

Website Color Picker – Test color combinations quickly.

I Like Your Colors – Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator – Easily create attractive CSS menus.

Listamatic – Collection of CSS menus.

List-O-Matic – Create your own CSS menus.

List-U-Like – Another tool to create your own navigation bars.

Tabs Generator – Create tabbed images for navigation.

Flash Buttons – Create navigation menus with flash buttons

CSS Play – An extensive collection of CSS menus.

Exploding Boy – Tabbed CSS navigation menus.

CSS Navigation Menu Generator – A tool to help you create your own menu.

FAVICONS

Favicon Generator – Create your own favicon from an image on your computer.

Favicon from Pics – Create a favicon from a photo.

Favicon Editor – Upload a photo, create a favicon.

Favicon.cc – Another option for favicons.

Photoshop Tutorial – Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts – Create attractive charts.

amCharts – Flash charts.

OTHER

Avatar Maker – Create and edit an avatar.

Shrink Pictures – Create an avatar from your photo.

ScaleNine – Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic – Converts bitmap images to vector art.

Templatr – Create a layout.

PsycHo – Blog template generator.

Web 2.0 Generator – Creates layouts.

Typetester – Compare fonts on-screen.

BlogPoll – Create a free poll for your blog.

RSSxl – Convert an HTML page to RSS.

Meta Tag Generator – Easily create meta tags for your pages.

URL Rewrite – Create search engine-friendly URLs for dynamic pages.

.htacces generator – Quickly create an .htaccess file.

Thumbnail Generator – Create thumbnails for a large amount of images.

Reflection.js – Adds reflections to your photos.

Drop Shadow – Improve your images with a drop shadow.

CSS Sprite Generator – From Website Performance.

Vecteezy – Stupid name. Cool vectors.

Brusheezy – Photoshop brushes.

PSBrushes.net – More Photoshop brushes.

deviantART – Photoshop brushes at deviantART

Παρασκευή 21 Μαΐου 2010

Χρήσιμες συλλογές

Themes
13 Wordpress Magazin-Themes
10 Fresh and Clean Themes
83 Beautiful WordPress Themes
21 Fresh, Usable and Elegant Themes
49 Creative And Unique Blog Designs
15 Websites With Creative Design & Features
35 Websites With Bold Colour Schemes
120 Best Free Blogger Templates Around

Css
CSS3 Techniques You Should Know
Basic CSS3 Techniques That You Should Know
How to Create Inset Typography with CSS3
20 Useful Resources for Learning about CSS3


Portfolio
44 Creative Designs for Inspiration
50 Excellent Designer Portfolio Sites
50 Inspiring Portfolio Designs
50 Fresh Portfolio Websites for Your Inspiration
90 Inspirational And Creative Portfolio Designs
101 Awesome Portfolio Sites



Typography
Typography Inspiration Showcase


Logos
Top 10 Sources of Logo Design Inspiration
50 Clever, Creative Logos

Κυριακή 13 Δεκεμβρίου 2009

Συλλογές Royalty Free Stock Images

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

Υπάρχουν πολλές πηγές Royalty Fee Stock Images διαθέσιμες στο διαδίκτυο με υλικό προς πώληση. Ορισμένες από αυτές αξίζουν τον κόπο, κάποιες άλλες όχι. Αν έχετε κουραστεί να δαπανάτε τα χρήματά σας σε υψηλής ποιότητας εικόνες τότε έχουμε κάτι καλό για εσάς, προκειμένου να εξοικονομήσετε χρήματά και να αυξήσετε τη συλλογή σας με εικόνες.

Παρακάτω, θα βρείτε 40 + από τις καλύτερες συλλογές για κατέβασμα Υψηλής Ποιότητας Royalty Free Stock Images Φωτογραφίες που μπορείτε να χρησιμοποιήσετε στα έργα σας χωρίς να πληρώσετε δεκάρα. Ωστόσο προσοχή, σιγουρευτείτε πως έχετε διαβάσει προσεκτικά τους όρους χρήσης , δεδομένου ότι μπορούν να αλλάξουν από στιγμή σε στιγμή.

Πηγή: http://www.instantshift.com/2009/03/03/40-sources-to-download-high-quality-royalty-free-stock-images/





1. http://www.dreamstime.com/free-photos

2. http://www.sxc.hu/

3. http://www.stockvault.net/

4. http://www.freedigitalphotos.net/

5. http://www.flickr.com/

6. http://stockart.deviantart.com/

7. http://www.everystockphoto.com/

8. http://www.freephotosbank.com/

9. http://www.freefoto.com/index.jsp

10. http://freerangestock.com/

11. http://www.photolib.noaa.gov/

12. http://www.studio25.ro/

13. http://www.adigitaldreamer.com/gallery/index.php

14. http://www.photocase.com/en/

15. http://www.fontplay.com/freephotos/

16. http://imagebase.davidniblack.com/main.php

17. http://www.imageafter.com/

18. http://www.woophy.com/map/index.php

19. http://www.photorack.net/index.php

20. http://www.freepixels.com/

21. http://www.morguefile.com/

22. http://www.kavewall.com/stock/

23. http://www.pixelperfectdigital.com/free_stock_photos/

24. http://www.public-domain-photos.com/

25. http://www.photogen.com/

26. http://freestockphotos.com/

27. http://freelargephotos.com/

28. http://www.free-photographs.net/

29. http://www.freejpg.com.ar/

30. http://www.amgmedia.com/freephotos/

31. http://www.unprofound.com/

32. http://www.vintagepixels.com/

33. http://www.dexhaus.com/v2/

34. http://www.openstockphotography.org/

35. http://energy.star29.net/store/

36. http://pdphoto.org/

37. http://www.turbophoto.com/Free-Stock-Images/

38. http://visipix.dynalias.com/index_hidden.htm

39. http://www.cepolina.com/freephoto/

40. http://www.freestockimages.net/

Κυριακή 4 Οκτωβρίου 2009

Δημιουργία web γραφικών

Cool Text is a free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. Simply choose what kind of image you would like. Then fill out a form and you’ll have your own custom image created on the fly.

http://cooltext.com/

Σάββατο 12 Σεπτεμβρίου 2009

Free Fonts

http://www.dafont.com

Τετάρτη 9 Σεπτεμβρίου 2009

Web 2.0 Background Generators


Online εργαλεία για δημιουργία backgrounds




Δευτέρα 7 Σεπτεμβρίου 2009

Συλλογές Ιδεών part 1

26 incredible single page web designs

24 Sites Powered By jQuery

30 Beautiful Contact Forms

70 CSS and Logo galleries

29 sites with community news form

25+ Beautiful and Functional Examples Importance of Footer

25 Amazing Retro Web Sites for Your Inspiration

Some styles for your pagination

Κυριακή 30 Αυγούστου 2009

webdesigner depot



Web Design Resources for Web Designers.


Περιέχει πολλά άρθρα , tips, συμβουλές, κριτικές, γνώμες, και, και, και, και .....

απο Web Designers για Web Designers.



Free Web Resources Depot

Τεράστια συλλογή με ότι κυκλοφορεί και έχει σχέση με Web Design


http://www.webresourcesdepot.com/

Κυριακή 23 Αυγούστου 2009

10 συστατικά που πρέπει να έχουμε στο μυαλό μας την ώρα του web design.

Πως σκέφτονται οι επισκέπτες;Οι επισκέπτες μιας ιστοσελίδας δεν διαφέρουν πολύ από τους επισκέπτες ενός καταστήματος. Οι επισκέπτες μπαίνουν στην σελίδα και κάνουν κλικ στο 1ο link που θα τραβήξει το ενδιαφέρον τους. Στην πραγματικότητα δεν κοιτάνε όλη την σελίδα αλλά μερικά μικρά τμηματικά κομμάτια.Οι περισσότεροι ψάχνουν κάτι ενδιαφέρον η κάτι που να πατιέται, αν το link που θα βγουν δεν τους καλύπτει πατάνε πίσω και ξαναψάχνουν. Παρακάτω κλέπτετε τι κοιτούν οι χρηστές όταν μπαίνουν σε μια σελίδα (με κόκκινο είναι αυτά που προσέχουν πιο πολύ).



1) Μην κάνετε τους επισκέπτες σας να σκέφτονται.
Συμφωνά με τον 1ο νομό του krug (που εχει γράψει και ένα πολύ καλό βιβλίο παρεμπίπτοντος ) όταν σχεδιάζουμε μια σελίδα πρέπει να βγάλουμε ότι μπορεί να μπερδέψει και να κουράσει τους χρηστές. Οι επισκέπτες αν δουν την σελίδα μας δύσκολη και ακατανόητη θα πατήσουν back και θα πάνε αλλού οπότε εμείς πρέπει να έχουμε καθαρό layout, links που να ξεχωρίζουν και σωστό και λειτουργικό design.

2) Μην παίζετε με την υπομονή των επισκεπτών.
Σίγουρα όλοι θα έχετε επισκεφτεί κάποιο web site οπού ζητάει από την αρχή register και η φόρμα του απαιτεί την εισαγωγή των ιδίων στοιχειών ξανά και ξανά. Η φόρμες στις ιστοσελίδες σας πρέπει να είναι απλές και σύντομες, εχει παρατηρηθεί ότι όσο πιο απλή είναι μια φόρμα τόσο πιο εύκολα ένας τυχαίος χρηστής που έρχεται στο site σας θα κάνει εγγραφή. Παρακάτω μπορείτε να δείτε ένα παράδειγμα μιας απλής και λειτουργικής φόρμας.


3) Τραβήξατε την προσοχή των επισκεπτών.
Το ανθρώπινο μάτι δέχεται ερεθίσματα από κείμενα εικόνες και κινούμενες εικόνες (βίντεο) κάποια από αυτά τραβάνε περισσότερο την προσοχή και κάποια λιγότερο. Σίγουρα πιο "χτυπητό" στο μάτι είναι οι εικόνες οπότε καλό είναι να τις χρησιμοποιούμε όταν θέλουμε να τραβήξουμε την προσοχή του χρηστή αλλά δεν πρέπει να το παρακάνουμε γιατί στο τέλος ο χρηστής θα καταλήξει μπερδεμένος. Παρακάτω βλέπουμε ένα site που εφαρμόζει τελεία αυτόν τον κανόνα, ο επισκέπτης το 1ο πράγμα που βλέπει είναι η λέξη free οπού θα τον κάνει να ψάξει πιο προσεκτικά το site με σκοπό να βρει το δωρεάν προϊόν η υπηρεσία.



4) Βοηθήστε τους επισκέπτες σας να καταλάβουν πως λειτουργεί το site σας.
Πόσες φορές σας εχει τύχει να πάτε σε κάποια ιστοσελίδα και να πατήσετε x επειδή δεν καταλάβατε πως λειτουργεί; Εμένα μου εχει τύχει αρκετές φορές, το ίδιο και οι επισκέπτες σας. Για αυτό πρέπει να τους βοηθήσετε όσο πιο πολύ μπορείτε, χρησιμοποιήστε χρώματα που να κάνουν αντίθεση και να είναι ευκολοδιάβαστα στα κείμενα σας και οπού έχετε links σχεδιάστε όμορφα buttons. Θα διευκολύνει τους επισκέπτες σας και θα κάνει την ζωή τους στο site σας αρκετά πιο εύκολη.

5) Υιοθετήστε έναν σωστό τρόπο γραφής.
Ο κόσμος του διαδίκου διαφέρει αρκετά άλυπο αυτόν της τυπογραφίας και της εκτύπωσης και για αυτόν τον λόγω πρέπει να υιοθετήσετε έναν διαφορετικό τρόπο γραφής από αυτόν που είχατε μέχρι τώρα. Συνοδέψατε το κείμενο σας με όμορφα backgrounds και σωστά τοποθετημένα κείμενα και αφήστε στην άκρη τα πολυχρησιμοποιημένα bold και italic. Δεν λέω ότι δεν πρέπει να τα χρησιμοποιείτε απλά πρέπει να υπάρχει πάντα ένα μέτρο. Επίσης σημαντικό είναι να έχετε ξεκάθαρες εκφράσεις και να αποφύγετε τους marketing ορούς πχ είναι καλύτερο ο επισκέπτης να δει το "Εγγραφείτε τώρα" από το "Αρχίστε τώρα" η το "Ανακαλύψατε τις υπηρεσίες μας". Παρακάτω είναι μια ιστοσελίδα που εφαρμόζει πολύ σωστά αυτόν τον κανόνα, δίνει στους επισκέπτες αυτό ακριβώς που ψάχνουν και δεν τους κουράζει με άσκοπα κείμενα και μεγάλες φράσεις.

6) Κρατήστε την σελίδα σας απλή.
Αυτός θα πρέπει να είναι ο βασικός κανόνας σας όταν σχεδιάζετε μια ιστοσελίδα, πρέπει να είναι απλή και κατανοητή. Οι επισκέπτες σας σπάνια μένουν σε μια ιστοσελίδα που εχει μονό καλό και εντυπωσιακό design. Η σελίδα πρέπει να είναι απλή και αυτός που έρχεται για 1η φορά ότι ηλικίας και αν είναι να βρίσκει άνετα τις πληροφορίες που θέλει.


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

8) Επικοινωνήστε με τους επισκέπτες σας με μια "εικονική γλωσσά".
Με τον ορό εικονική γλωσσά αναφέρομαι στην συνολική εικόνα της ιστοσελίδα σας και το τι λέει για εσάς στον επισκέπτη. Ο Aaron Marcus εχει ορίσει τα 3 συστατικά της επικοινωνιακής γλωσσάς
Οργάνωση
Παρέχετε στον επισκέπτη καθαρή δομή, συνεπεία στην σελίδα σας και ιεραρχικά τοποθετημένα τα στοιχειά (κείμενα, εικονες, πολυμέσα) σας.
Οικονομία
Όπως είπα και παραπάνω κρατήστε την σελίδα σας απλή και αναιρέστε οτιδήποτε περιττό. Η σελίδα σας πρέπει να εχει 4 κυρία χαρακτηριστικά:
Αφαιρετικότητα (Simplicity)
Να έχετε μονό τα απαραίτητα στοιχειά.
Καθαρότητα(Clarity)
Όλα τα στοιχειά της σελίδα σας πρέπει να είναι έτσι σχεδιασμένα ώστε να μην μπερδεύουν.
Distinctiveness(Διακριτικότητα?
Δεν είμαι σίγουρος για τον Ελληνικό ορό )Όλα τα στοιχειά πρέπει να ξεχωρίζουν και ναι είναι διακριτά.
Έμφαση (Emphasis)
Τα πιο σημαντικά στοιχειά πρέπει να τονίζονται και να ξεχωρίζουν από το υπόλοιπο σύνολο.
Επικοινωνία
Κατασκευάστε την σελίδα σας έχοντας υποψιών το κοινό που απευθύνεστε και για κανέναν λόγω μην χρησιμοποιείτε πάνω από 3-4 διαφορετικούς τύπους γραφής.

9) Κάντε συμβιβασμούς με το προηγούμενο design σας αλλά και τους χρηστές σας.
Όταν φτάνει η ώρα να επανασχεδιάσετε την ιστοσελίδα σας καλό θα ήταν να κάνετε λίγες αλλαγές την φορά αν αυτό είναι δυνατό. Έτσι διευκολύνετε τους χρηστές σας να προσαρμοστούν στην νέα σελίδα σας. Επίσης σημαντικό ίνα να έχετε υποψιών σας τις ανάγκες και τις προτάσεις των επισκεπτών της ιστοσελίδας σας. Ακουστέ τις απόψεις τους και εφαρμοστέ την γνώμη σας σε περιπτώσεις που νομίζετε ότι η ιδέα σας είναι καλύτερη από την δικιά τους.

10) Test, test, test!
Πριν δημοσιεύσετε κάτι δοκιμάστε το σε όλα τα πιθανά προβλήματα που μπορεί να προκύψουν. Επίσης μην αμελείτε τα website σας, είναι πολύ σημαντικό να δοκιμάζετε αν λειτουργούν σωστά και τι αλλαγές θα πρέπει να κάνετε για να βελτιωθεί η εικόνα τους.

Εργαλεία για patterns και Backgrounds

BgPatternsΤο BgPatterns είναι ένα εργαλείο που μπορείτε να δημιουργήσετε τα δικά σας patterns με έναν αρκετά εύκολο generator. Περιλαμβάνει 68 σχεδία που μπορείτε να τα τροποποιήσετε ώστε να τα φέρετε στις δικές σας ανάγκες.

Stripe GeneratorΆλλος ένας generator μονό που αυτήν την φορά ασχολειται αποκλειστικά με ρίγες (stripes).

DeviantArt PatternsΤο DeviantArt αποτελεί ένα από τα μεγαλύτερα (ίσως το μεγαλύτερο) web gallery γραφιστικής και τεχνών. Μια από τις κατηγορίες του είναι αυτή των resources και σε αυτήν την περίπτωση των photoshop patterns. Εδώ θα βρείτε μια τεραστία συλλογή από patterns που έχουν φτιάξει άλλοι χρηστές και μπορείτε να χρησιμοποιήσετε στις δημιουργίες σας.

Smashing Magazine CollectionΑν ασχολείστε με το web design η την γραφιστική τότε σίγουρα θα έχετε ακούσει το smashing magazine. Είναι μια ιστοσελίδα που περιλαμβάνει αρκετά ενδιαφέρον θέματα γύρω από τον χώρο του web και της σχεδίασης. Σε αυτό το post έχουν συμπεριλάβει μια πολύ καλή συλλογή από patterns που σίγουρα θα σας φανούν χρήσιμες.

Πηγή http://www.insomnia.gr

Χρωματικές παλέτες Daily Colour Scheme

Η ιδέα του daily color scheme είναι ότι κάθε μέρα γίνεται ανάλυση μιας χρωματικής παλέτας. Είναι εξαιρετική ιστοσελίδα και περιέχει έναν αξιοσημείωτο αριθμό χρωμάτων.

http://beta.dailycolorscheme.com/

Χρωματικές παλέτες - ColourLovers

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

http://www.colourlovers.com/

Χρωματικές παλέτες - kuler

Το kuler είναι ένα flash site της adobe που περιλαμβάνει χιλιάδες χρωματικές παλέτες αξιολογημένες και βαθμολογημένες από τους χρηστές. Σκοπός του site είναι να σας βοηθήσει να επιλέξετε το κατάλληλο χρώμα για την ιστοσελίδα σας. Σας έχει αναλυτικά τους χρωματικούς συνδυασμούς και σας δίνει τους hex codes ώστε να τους εισάγετε στο σχεδιαστικό σας πρόγραμμα.



http://kuler.adobe.com/

Τρίτη 28 Οκτωβρίου 2008

Λίστα Χαρακτήρων που ορίζονται στην HTML 4.01 και μετά



http://www.eki.ee/letter/chardata.cgi?HTML4=1

FavIcon Generator

Χρησιμοποιήστε αυτό το online εργαλείο για την εύκολη δημιουργία ενός favicon (Favorites εικονίδιο) για το δικτυακό σας τόπο. Το favicon είναι ένα μικρό, 16x16 εικονίδιο που εμφανίζεται στη γραμμή διεύθυνσης του browser και στο μενού αγαπημένα.