25 Photoshop Tutorials for Web Designers Adobe Photoshop is the tool of choice for most web designers. From creating a website template to objects and components such as content boxes and buttons, Photoshop doesn’t fail to deliver. In this collection, you’ll find 25 excellent Photoshop tutorials geared towards web designers. You’ll find a variety of tutorials that include creating full web page templates, navigation menus, headers, and content boxes. If you know of a good Photoshop tutorial for web designers – why don’t you share it with all of us in the comments.
Labs - GreyBox A pop-up window that doesn't suck. Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: It does not conflict with pop-up blockers It's only 22 KB! Examples One website To trigger GreyBox you'll only need to append a rel tag on your a tags: <a href=" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a> Website gallery Image gallery It takes very little code to display image galleries: Installation Step 1 Append following to your header section. <script type="text/javascript"> var GB_ROOT_DIR = " GB_ROOT_DIR should be absolute. Step 2 Append also following scripts and one stylesheet: AJS_fx.js is optional. Step 3 You are ready to use GreyBox. Where could it be used? Showing external pages AJAX uploading of files Showing internal pages (login, user preference, properties, contact formulas etc.) What browsers are supported? Other browsers may also be supported.
In the Woods - The Importance of Color in Web Design All too often, I see a great design concept with a poor choice of colors. Part of what makes a great web design “great” is layout, typography and color. When each of these aspects work to compliment each other, great design is born. RGB vs CMYK If you’re an experienced designer, but are new to web design, you’re most likely a print designer. Red Green Blue (RGB) When you look at your computer monitor you’re looking at colors generated using red, green and blue light. Note that the key word here is light. 100% red light, 100% green light and 100% blue light added together will create white on your monitor. So how do we express RGB colors on the web? So for example the color red expressed in a three-byte hexadecimal value would be FF0000. Cyan Magenta Yellow Black (CMYK) I won’t get into CMYK too much since it doesn’t really apply to what we want to talk about. So why do you need to know the difference between RGB and CMYK? Photoshop Color Settings & Browser Embedded Color Profiles
Evolve Your User Interface To Educate Your Users | Know-How | Smashing Magazine Advertisement The Web has changed. This isn’t your neighbor’s nerdy kid’s internet anymore. Complicated menu systems, alert dialog messages that lock you out of the browser and flashy but confusing layouts aren’t necessarily going to help you make conversions. User Interfaces Should Teach User interfaces need to teach your user how to use your application without resorting to a help screen. The help section of most applications, Web-based or otherwise, end up being used by the power users who are already trying to figure out every nook and cranny of the application. In-line tips and interface descriptions work as an excellent introduction to the interface and how it operates. Nourish by Integral Impressions is an application that creates an automated email newsletter of any RSS feed. Nourish’s interface is documented in-line with descriptive help blocks. 37Signals accomplishes helping their users with their communications management applications like Basecamp in a similar manner.
Paper Strips Menus - Smashing Magazine Advertisement The beauty of an excellent design lies in designer’s attention to smallest details. Conventions are our friends; however, to stand out, a design needs a creative spin, an elegant play of colors, some unique flavour — a small detail that would make a big difference. Where the boundaries between traditional solutions and unusual approaches become fuzzy, designers tend to get creative. However, to come up with unusual ideas isn’t that easy, particularly if you are dealing with some daily routine-tasks. Still, nothing is impossible. Deb Sofield sticks posts on a paper pile. A menu in the shape of coloured loops. These ties will never hang on the neck of a web-developer. The navigation menu is simple, nice and fits perfectly to the overall design; navigation options appear to stick out of the content area. It's done.
Designing a WordPress Theme From Scratch A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. First, find a WordPress Theme architecture that you like, be it one or two sidebars, or no header, or whatever you want. If you aren’t worried about bandwidth on your website or your Internet connection, you can style your site right on the Internet. Get familiar with your site’s layout and structure by checking the source code and the style sheet, and begin your modifications one at a time. I recommend that you backup your test Theme folder frequently as you go, in case you make a big mess and you need to go back, but not to start over. Determined to Start from Total Scratch If you are determined to redesign your WordPress Theme from scratch, you probably already know how to do this. One of the best tools recently developed for web page designers is found in the Firefox Internet Browser. WordPress Theme Design Help Digg | Furl
Morceaux choisis : Emirates, The Resumator, Kontain, SpeakerRate Une nouvelle formule pour cette édition de Morceaux Choisis, la série d’articles qui s’intéresse au génie et au design de certaines parties d’un site Internet. Il y aura dorénavant plus de sites présentés dans cette rubrique, ainsi que plus de place donnée aux captures d’écrans. Je vous invite toutefois à prendre le temps de visiter chacun de ces sites pour les découvrir grandeur nature et en profiter pleinement. Sharkey Media Une entête très claire et bien proportionnée : 365 Days of Astronomy Ici c’est l’image de fond de type aurore boréale qui prédomine : Emirates Un découpage habile de l’image principale : Articulate Un travail tout en dégradé. Marketcircle Une utilisation de blocs graphiques imposants et très colorés : Billings 3 Un design à la Apple très agréable : Icon Resource Le schéma de couleur est original et là encore très Mac : The Resumator La partie haute de la page est une véritable réussite : RedBrick Health J’aime beaucoup le travail sur les ombres et la transparence : Kontain Box.net
50 Stylish Navigation Menus for Design Inspiration Six Revisions Skip site navigation 50 Stylish Navigation Menus for Design Inspiration Apr 10 2009 by Jacob Gube | 39 Comments A site’s navigation menu is one of the most prominent things that users see when they first visit. In this article, you’ll find a showcase of beautiful, creative, and stylish navigation menus for your inspiration. 1. netdreams.co.uk 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 15. 16. rzepak.pure.pl 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. csharpdesign.co.uk 36. 37. okb 38. 39. 40. 41. 42. 43. 44. toby-powell.co.uk 45. 46. 47. 48. 49. 50. Related content 39 Comments Alex April 10th, 2009 Here is another one: (top navigation) Kayla April 10th, 2009 Very cool menus. Jamiel Sharief April 10th, 2009 Nice collection. David April 10th, 2009 thx for sharing! Danny Hinde April 10th, 2009 Caroline April 10th, 2009 Great list – one missing – using tag clouds as part of navigation kayintveen April 10th, 2009 Tony Creamy CSS
37 Phenomenal jQuery Plugins and Demos for Developers : Speckyboy Design Magazine In this post we have collected 37 jQuery plugins for use in your next web project. Slide-In Contact Form Description : When the user clicks on the Contact link at the top of the page, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up to its original position. Virtual jQuery Keyboard Description : This tutorial will explain how to implement a simple virtual keyboard with some with jQuery. Digg style sign up form Description : Simulate a Digg style signup form, with its unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. Load Content While Scrolling With jQuery Description : If you have lots of content to present but can not load all of it at once as it may take too long, this plugin is the answer. Pirobox jQuery Lightbox FancyBox Facebox 1.2 JQuery Cycle Plugin InnerFade Tablesorter 2.0 jGoogle jTruncate idTabs
50 Beautiful And User-Friendly Navigation Menus | Design Showcas Advertisement Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in. Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. Please also consider our previous articles: CSS-Based Navigation Menus: Modern Solutions1, which lists modern solutions for CSS-based navigation.Navigation Menus: Trends and Examples2 is an inspirational collection of navigation menus. 1. Loodo3A colorful menu that adds to the feel of the website. Acko.net4Steven Wittens takes a look at the navigation menu from a quite unusual perspective. Artgeex27Vivid typography in use. 2.
10 incredible JQuery navigation menus Animated Drop Down menu with JQuery A DropDrown menu is often a good choice when you have many items to display. In such cases, what about animating it? Source iPod style menu The iPhone is indeed a very good example of minimalistic, but great looking, design. Source Superfish – jQuery menu plugin Superfish is a JQuery plugin especially dedicated to menus. Source Lavalamp for JQuery lovers Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Source How to make a smooth animated menu with JQuery A very nice tutorial to learn to create a very nice and artistic effect for your websites. Source Navigation effect using JQuery Another “Great to read, Simple to implement” JQuery tutorial. Source Animated JQuery menu Among other things, JQuery is very useful for an easy manipulation of the CSS background-position property. Source How to create a vertical sliding JQuery menu Source Apple menu, improved Source Source
Bring Twitter to Your Blog « Blog « WordPress.com Have you become addicted to telling the world what you’re up to in 140 characters or less? If so, we’ve launched a feature that you’ll love: a Twitter widget for your sidebar. Now you can quickly and easily keep your readers connected to your updates on Twitter, and make your blog the home of even more of your content. All the links that you post to Twitter remain clickable in the widget, and your @ replies link to user profiles, like when you say, “Hey @photomatt!”. To add the Twitter widget to your WordPress.com blog, just head to Appearance > Widgets in your dashboard. Click “Add” to add it to your sidebar, and then click “Edit” to set your Twitter username and choose how many updates you’d like to display. Have more than one account on Twitter? Update: We’ve released the Wickett Twitter Widget plugin for WordPress.org users. Like this: Like Loading... Heather R.
30 Exceptional CSS Navigation Techniques We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. 2. View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3. View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. 4. View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. View Demo 6. View Demo 7. View Demo This stylish navigation menu technique uses a CSS sprite. 8. 9.