Resources for Web Development Students @ Robin's Blog » Design and Layout

Easy to Follow Photoshop Tutorials for Creating Portfolio Layouts

Robin Wood — Wed, 13 Jan 2010 18:40:37 +0000

With hundreds of tutorials for creating portfolio layouts and mockups in Photoshop it’s hard to find tutorials that are easy for novice Photoshop users to understand and complete. We have reviewed several tutorials for creating one page portfolio layouts and I feel the following should be easy enough for the beginner to understand. These tutorials will teach you many new Photoshop techniques and will give give you a better understanding of how to properly convert Photoshop files to working Websites.

Before you complete each of these tutorials I would recommend that you download the source PSD (Photoshop) files that can be found on each of the tutorials. They are usually linked at the beginning of the tutorial or at the end. Open the source PSD files and examine the layers, guides, etc. Keeping the source files open while you are working on the tutorial is also helpful if you have questions about measurements, guide positions, and font colors and sizes.

Many of these tutorials call for screen captures of Websites you have created. Because you’re entering a new field you may not have a lot of sites to showcase, so feel free to use photographs instead.

After completing the Photoshop specific tutorials I have compiled several tutorials for creating the Photoshop mockup and converting it to a working XHTML/CSS site. Students in my class must complete all of these tutorials.

The first five tutorials are from DesignM.ag, a community for designers. They were extremely detailed and very easy to follow. DesignM.ag has additional layout tutorials that you may want to review after completing the tutorials outlined in this post.

How to Design a One-Page Portfolio in Photoshop

Design an Attractive One-Page Portfolio Using Photoshop

Design a Textured Portfolio Site Layout Using Photoshop

Design a Portfolio Site with a Textured Background

After completing the above portfolio layout tutorials you should complete Design a Clean Portfolio Site in Photoshop and How to Code a Clean Portfolio Design

More Advanced Tutorials

Once you have completed the above tutorials take your knowledge a step further by completing the following tutorials:

Design a Minimal and Modern Portfolio Layout with Photoshop – I would recommend that you download the PSD file for reference before you begin the tutorial. By examining the Photoshop file from Six Revisions I was able to see where guides should be set which made creating the overall layout much easier. Once you have completed the Photoshop layout you can code it by following the tutorial Minimal and Modern Layout: PSD to XHTML/CSS Conversion

How to Create a Grunge Web Design Using Photoshop – While this tutorial does not have “portfolio” in the title the layout is really perfect for a one page portfolio for those of you who are looking for a grunge style site. It’s a bit more challenging and I found it extremely helpful to download the grunge-web-design-from-scratch.zip that can be found on the second part of the tutorials, How to Code a Grunge Web Design from Scratch. You will find that this site does not display properly in Internet Explorer 6 because PNG 24 images are used. Here is an article on Transparent PNG 24 Images with Internet Explorer 6 for Beginners.

I have copies of each of these tutorials printed with my own notes. Let me know if you need help with measurements, etc. We are continuing to work on finding tutorials that are easy to understand. Meanwhile, explore some of the other tutorials for creating portfolio layouts and mockups in Photoshop.

The Designer Deal on SitePoint Books – 75% off!

Robin Wood — Tue, 15 Dec 2009 16:49:36 +0000

SitePoint is offering a deal on PDF versions of The Principles of Beautiful Web Design and Sexy Web Design. Both PDF design books can be yours for just $14.95for the next 12 hours. These books are both required reading for the Web Design and Development curriculum, so if you haven’t gotten them yet now is a great time!

From SitePoint

What do you have when you combine beautiful with sexy?

One stunning looking web site!

Our two best-selling design books are up for grabs today.
For just $14.95 you can pick up a PDF copy of both “Sexy
Web Design” by Elliot Jay Stocks and “The Principles Of
Beautiful Web Design” by Jason Beaird.

These two books go perfectly together, combining
inspiration and practical design advice to help you turn
your next web site into something spectacular.

Own them now for just $14.95:

http://sale.sitepoint.com

A web design twin-set, 75% off the normal price. This
is one deal you don’t want to miss.

SitePoint is offering a special deal every day from now until December 24. Make sure to sign up for email notifications on these special offers!

Sexy Web Design – Curriculum Addition

Robin Wood — Tue, 28 Jul 2009 19:30:05 +0000

I just finished reading Sexy Web Design Create Your Own Stunning Web Interfaces That Just Work by Elliot Jay Stocks and I wasn’t disappointed. This book gives a detailed look at the process of creating a Web design.

The book is divided into six chapters:

Interfaces – Gives an overview of the design process. Essentially this is a nice overview of what the book will cover in the remaining chapters.

Research – Discusses the importance of creating a design brief which explains what the client expects from the design. It includes questions to ask when developing the brief. Essentially the brief will give you the goals of the site and act as the guide for the rest of the site’s development. It also discusses branding, inspiration galleries, and useful tools.

Structure – This chapter delves into creating sitemaps, sketches, diagrams, and wireframing.

Navigation and Interaction – Different types of navigation (global, local, pagination, and breadcrumbs) are discussed in this chapter, as are different styles (horizontal, vertical, drop-downs, tabs, and collapsible/expandable). It also discusses forms, ecommerce, and multimedia content.

Aesthetics – There is a short introduction to layout and composition, but the author recommends that the audience read The Principles of Beautiful Web Design which is already required reading for our course. This chapter focuses on the type of layout to select (fixed, fluid, or elastic), using grids in design, specifically the 960 Grid System, color basics and tools, consistency, volume and depth, pattern and texture, imagery, illustration, iconography, and typography. It then discusses pulling it all together to create a “Sexy Web Design”.

Deliverables – This chapter discusses the best way to show your clients the mockups, how to organize the design comps, exporting images, creating functional mockups and the development of style guides.

This book does not cover HTML, CSS, or Photoshop – it’s about planning and design. The author uses great visual examples and has links to terrific articles on the Web. It’s a clear and concise guide to creating modern Web sites.

Sexy Web Design Create Your Own Stunning Web Interfaces That Just Work will be required reading for the course. This book should be read in conjunction with the Photoshop unit. The book is available at Amazon for $26.37 (new) and for about $22.00 used.

Tripwire Magazine’s Mega CSS Resource Roundup

Robin Wood — Mon, 27 Jul 2009 02:01:53 +0000

Tripwire Magazine has compiled a terrific Mega CSS Resources Roundup that is a must bookmark for student. It includes cheatsheets (CSS HTML/XHTML, and color), excellent CSS resource sites and articles for beginners, free templates, positioning articles, articles on styling forms, typography articles and resources, graphing techniques, frameworks, numerous menu options, and tools to optimize your CSS and enhance your workflow.

While you are over at Tripwire, check out 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know, 7 New Essential CSS 3 Techniques Revealed, 160+ Mega Web Design Tutorial Roundup, and 150 Worth Knowing Web Developer Tools and Techniques too.

Oodles of Web Design Resources

Robin Wood — Mon, 22 Jun 2009 15:25:38 +0000

This is a roundup of wonderful design related articles.

Remember, these are articles I “tweet” on Twitter. Click the @username to see the posts of some of the people who I respect and love to “follow” on Twitter, the #hashtags to search the related topics, and of course the actual links to read the awesome articles.

Web Design Resources Roundup

Hints, Tips And Tricks For Web Design Part 1: Beyond The Visual http://bit.ly/4hjuI
Hints, Tips And Tricks For Web Design Part 2: Production Techniques http://bit.ly/SZ5bl
Designers Predict Design Trends for 2010 http://bit.ly/cO0y7 (via @naldzgraphics)
10+ Exceptional Free Tools for Monitoring Your Websites Uptime http://bit.ly/6A2w6
RT @jggube: 20 Creative and Unique Typefaces: http://digg.com/d1tmGo?t
20 Examples of Great User Interface Design http://bit.ly/nkpMS
RT @mlane: 25 of the Best Photographer Portfolio Websites – Part 1: http://bit.ly/VabgN and 2: http://bit.ly/k4eZC
RT @youthedesigner: New blog post: 15 Grandiose Green Website Designs http://bit.ly/13TUcC
12 Excellent Free Tools for Monitoring Your Site’s Uptime http://bit.ly/eIgEk
60 Awesome Sites for Free #Fonts http://bit.ly/191dHS
Showcase Of Popular Automobiles Websites #inspiration http://bit.ly/z1L7I
30 ESSENTIAL PDF DOCUMENTS EVERY DESIGNER SHOULD DOWNLOAD http://bit.ly/LL836
RT @pfrigerio: 30 More Essential PDF Documents Every #Designer Should Download… http://bit.ly/ukF6D
Gallery of 3D Elements in Web Design http://bit.ly/SXqNN
88 Single Page Website Designs For Design #Inspiration http://bit.ly/zIwoU (via @myreactiveone)
21 Awesome #iPhone Apps for Web Professionals: http://bit.ly/H5Dsv (via @sitepointmatt @deakaz)
RT @designcoyote 15 Most Useful & Free Collection of Ready-To-Use #Design Freebies | SmashingApps.com http://bit.ly/nRjxu
10 Apps for Web Designers Using a Mac http://bit.ly/bn9PK
20 Tools to Make the Life of a Web Developer Easier http://ff.im/-3M7bq (via @brandonacox)
RT @bthnynn: 25 Beautiful One Page Portfolio Websites of Designers on Twitter: http://tinyurl.com/q4hgd4
RT @mlane: Hit a Plateau? 4 Ways to Improve Your Skills – http://bit.ly/bvps9
RT @DesignerDepot: Popular Design Blogs Share Their Stats: http://tinyurl.com/m5mxnk
50 Inspiring Abstract Illustrations in Web Design http://bit.ly/S9PNW #inspiration
RT @chadengle: [NEW SITE LAUNCH] for all you #app devs, designers & enthusiasts! @fuelyourapps http://fuelyourapps.com #FUEL
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? http://bit.ly/12arFz for Deb
RT @logocritiques: 50 Captivating & well-formed #Logo Design http://bit.ly/UARc6
RT @Brandensilva @styletime: 5 new Niche Galleries http://bit.ly/NDsgi
10+ Brilliantly Designed Mac and iPhone App Websites http://bit.ly/r6Hx3
RT @brandonacox: 15 Coolest Minimalist WebDesigns Using #Photograph as Background http://ff.im/-3OBme
50 Free Handwritten #Fonts for Web Designers and Logo Artists http://bit.ly/kLZqd
RT @iamkhayyam @murdamw: 50 Captivating & well-formed Logo Design http://bit.ly/UARc6
Eclectic Color Roundup http://bit.ly/1S7mm check out Color Snap by Sherwin-Williams for the iPhone, handy for designers
RT @buysellads: The Power of Typography in Design – Quite a Few Lessons from @freelancesw http://bit.ly/oYxwd
RT @mlane: ProFolio 1.05 – Featuring Portfolio Navigation – http://bit.ly/izsoH
Emphasis in Design – How to Create Interest and Command Your Visitors’ Attention http://bit.ly/ApsMB
Best of the Week #68 at abduzeedo #inspiration http://bit.ly/rFQys
Left-Brained vs. Right-Brained – The Developer/Designer Paradox http://bit.ly/gfdRx
Right Brain vs Left Brain Creativity Test http://bit.ly/G39U
RT @simonashley @vectorss: 20 Sleek and Clean #Fonts From Dafont http://bit.ly/3lhoTf
Designers and the Need to Get Disconnected – http://bit.ly/10MIN0 (via @mlane)
RT @WhiplashDesign: How to Stay Ahead of the Curve as a Designer: http://tr.im/nzcb
RT @mlane: The Best RSS Feeds for Designers and Developers from A to Z – http://bit.ly/WNREO
Keep an Inspiration Notebook to Retain Offline #Design Inspiration http://bit.ly/tE0gO
RT @Reencoded: 12 beautiful home page designs for Inspiration http://digg.com/d1sxz7
10 Tips to Create a More Usable Web http://bit.ly/Osrxk
9 Crucial UI Features of Social Media and Networking Sites http://bit.ly/IUIbM from Smashing Mag
How to Stay Ahead of the Curve as a Designer http://bit.ly/QQShF
RT @cheth: ★Blogger Labs- Free Blogger Template Generators! http://bit.ly/Yvg6h
Fixed vs. Fluid vs. Elastic #Website Layout: What’s The Right One For You? http://bit.ly/OqF1M (via @phaoloo)
40 of the Best #Websites of Non-Profit Organizations http://bit.ly/O8RxR
RT @atsmith: Resources for designers by designers + http://twurl.nl/u8ufw7 (Nice!)
Sweet Tweets: Design Tweets of the Week #2 http://bit.ly/Xx0yQ
RT @designfeed: Best of the Week #67 http://bit.ly/17IgFj
RT @designfeed: The Ultimate #Drupal Toolbox: 150+ Themes, Plugins & Resources http://bit.ly/dAAxN (via @Arbenting)
RT @styletime: 29 Excellent Typography Tutorials for Designers http://bit.ly/Brk3n (via @iamkhayyam)
MyInkTrail, Best of the Design Community, May 2009 http://bit.ly/1318IE
30 Inspiring Dark and Sleek Web Designs http://bit.ly/19rOHO
Web Worker Careers: Web Design http://bit.ly/13wZ8R
10 Sleek and Professional #Flash Image Gallery Tutorials http://bit.ly/14fgQd
RT @iBlend @DannyOutlaw: 5 Strange Places to Draw Inspiration From http://tinyurl.com/ktop99
RT @passionsista @DesignerDepot 20 Light Minimalistic #Website #Designs: http://tinyurl.com/omnzdk (via @arnteriksen)
Ultimate List of 32 #Font And Typography Tools http://bit.ly/XAgam (via @creattica @MadysonDesigns)
The Creative Brief: Questions to Ask Before Designing a #Logo http://twurl.nl/vpcik8 (via @logocritiques)
35 Amazingly Well-Designed Church Websites http://digg.com/d1sT3Q?t (via Digg) (via @jophillips)
RT @playgroundpilot 9 Tips For Brand Building With Web Design http://tr.im/mPyn (via @mikakiviranta)
The Best of Twitter – May 2009 – Creattica – http://bit.ly/CqNWN
Major Networks of Websites: Trends and Showcase http://bit.ly/160lzs
RT @phaoloo: RT @murnahan: Impressive #LEGO V8 Engine http://bit.ly/yNBo9 WOW! Off to buy legos
45+ Exceptionally Useful Free Handwritten #Fonts http://bit.ly/YYd6c (via @styletime)
Do you Know “What is Design?” 41 Answers to One Simple Question http://bit.ly/eQiXx
RT @Minervity @ThemeForest: 40 Really Awesome Resources for Design #Inspiration http://bit.ly/Tghhb
RT @CreativeOpera RT @smashingmag: 50 Ways To Become A Better Designer – http://digg.com/d1sDa7 Huge List!

500+ Illustrator and Photoshop Logo Tutorials, Resources, and Inspiration

Robin Wood — Mon, 11 May 2009 20:42:50 +0000

While some companies that you may go to work for have their own “corporate branding” already established, many small businesses will need to create their identity for print and online marketing materials.

This article includes some of the top resources for logo design that I have found over the last month on Twitter and while visiting some of my favorite design blogs. It’s a collection of collections. I have also included some general tutorials and resources that I think that you will find useful for learning and using Photoshop and Illustrator. I will update this post as I find new resources.

Desizn Tech has compiled a list of 40 Logo Design Tutorials. This list includes tutorials for Illustrator, Photoshop, Gimp, Pixelmator & CorelDraw. Some of the tutorials outline the detailed design process from sketch, to computer, to print.

Smashing Magazine has 60+ Beautiful Logo Design Tutorials And Resources. Not all of the tutorials are specific to logo creation, but the techniques used in the tutorials are quite useful for creating logos. These tutorials focus on Illustrator, Photoshop, and Corel. You will also find logo design articles and additional resources at Smashing Magazine. There are two related articles at Smashing – Drawing Inspiration From Creative Logos and Beautiful And Creative Logo Designs For Your Inspiration.

I would also recommend checking out the Adobe Fireworks Tutorials and Downloads – Best of post while you are at Smashing Magazine. Fireworks is a great program for creating Website mockups and logos. Some students have expressed to me that Fireworks easier to master than some of the other illustration programs.

Six Revisions has two articles that you should find very useful. 70 Excellent Logo Design Tutorials and Resources has a lot of resources about the design process, from conception to final product, in addition to logo design galleries, design articles, showcases, books, and blogs and Web sites on logos. The second article, 15 Excellent Logo Design Tutorials Using Illustrator has 15 amazing tutorials for creating logo in Adobe Illustrator.

80+ Logo Designers Huge Essential Toolbox. This massive resource from tripwire magazine includes tutorials, inspiration galleries, and trends.

What Makes a Great Logo Design? is a great article at Logo Critiques. Be sure to check out the other available articles.

Logo Design Love has a collection of 81 of the best logo design resources. This resource includes where to find excellent typefaces, the history of logo design, logo design trends (Just Creative Designs has Logo Design Trends 2009), logo design articles, books, portfolios, awards, blogs, Illustrator tutorials, showcases, and style guides and manuals.

TutWow has posted 12 Incredibly Useful Logo Inspiration Sites.

You can find 25 Best Logo Design Tutorials using Photoshop at TechTreak.

While mentioned in several of the above posts, Just Creative Design has a wonderful article on The Logo Design Process of TOP Logo Designers. There are a lot of articles on Just Creative about the logo design process.

I love the post 25 Awesome Illustrator Cartoon Tutorials at Minervity. No, these are not logo tutorials, but so many logos are created in Illustrator and use a very similar process, I thought that these would be a fun way for you to sharpen your Illustrator skills.

Blog Spoon Graphics has a great collection of 40 Tutorials for Creating Highly Detailed Icon Designs. You will find both Illustrator and Photoshop tutorials in this post.

Photoshop brushes can help immensely with creating graphical elements. izzataziz a design blog has compiled 3000++ Photoshop Brush Designer Should Have.

Can’t forget Illustrator Brushes! You’ll find 45 Excellent Sets of Adobe Illustrator Brushes at Designm.ag

Check out 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources at Noupe. These Illustrator resources should be very helpful.

New addition 5/12/09 – 45 logos that utilize negative space effectively at Velvet Ant.

New addition 5/12/09 – 60+ Hand Based Logo Designs at Logo Designer Blog.

New addition 5/12/09 – 5 vital logo design tips

New addition 5/12/09 – 11 Steps of a Successful Logo Design Process

New addition 5/26/09 – 40 Logo Design Tutorials – Photoshop and Illustrator tutorials at Psdtuts+

New addition 5/27/09 – Current Logo Trends (2009)

New addition 5/27/09 – Ten logo design tips from the field

New addition 6/3/09 – Insider Logo Design Tips

New addition 6/6/09 – Top 10 Sources of Logo Design Inspiration

New addition 6/7/09 – 10 Great Tips To Help You Kick Start Your Logo Design

New addition 6/7/09 – 50 Captivating & well-formed Logo Design

New addition 6/8/09 – 50 Captivating & well-formed Logo Design

New addition 6/9/09 – How to Make an Eye-Catching Logo

New addition 6/10/09 – Lust for Logos — 15 Sites to Visit for Logo Inspiration

New addition 6/21/09 – Color Psychology in Logo Design

New addition 6/25/09 – 10 Common Mistakes In Logo Design

New addition 6/29/09 – 12 Essential Rules to Follow When Designing a Logo

New addition 7/01/09 – 25 Distinctive and Famous Logo Photoshop Tutorials

New addition 7/02/09 – 20 Questions To Ask Clients Prior To Designing A Logo

New addition 7/02/09 – The Rebranding of a Company – A Case Study

New addition 7/06/09 – 80 Creative and Well-designed Logos

New addition 7/08/09 – 45+ Beautiful Logo Design Tutorials and Resources for Designers

New addition 7/08/09 – Good Logos Are Flexible: Tips to make sure yours is

New addition 7/13/09 – The Logos of Logo Designers

New addition 7/15/09 – Henri Ehrhart logo design process

New addition 7/27/09 – LOGOS, Logos, logos!

New addition 7/28/09 – What makes a good logo?

New addition 7/28/09 – A Special Need logo design process

New addition 8/16/09 – 30 Creative Illustrator Logo Design Tecniques and Tutorials

New addition 8/17/09 – 27 Useful Logo Design Tutorials and Tips

New addition 8/18/09 – Illustrator type technique using shapes

New addition 8/26/09 – Vital Tips For Effective Logo Design

New addition 9/1/09 – Logo Design RoundUp Part 11 – How Designers Promote & Brand Themselves

New addition 9/1/09 – 90+ Exceptionally useful Logo Tutorials, Tips and Resources

New addition 9/17/09 – Zee Logo in Illustrator

New addition 9/21/09 – An Interview with Graphic Designer, Brian Hoff

New addition 9/21/09 – 30 Professional Logo Design Processes Revealed

New addition 10/2/09 – Crucial Rules to Follow When Designing a Logo

New addition 10/6/09 – Identity design process for a personal rebranding

New addition 10/13/09 – 6 Characteristics of Great Logo Design

New addition 10/19/09 – 57 Creatively Designed Examples Of Typography In Logo Design

New addition 11/24/09 – Tutorial: How To Create An Iconic Logo Design

New addition 11/25/09 – Logo Design Tips: Letterspacing Techniques for Different Typefaces

If you like these resources be sure to check out Converting a Photoshop PSD File to an XHTML & CSS Web Site – Creating Mockups.

Converting a Photoshop PSD File to an XHTML & CSS Web Site – Creating Mockups

Robin Wood — Tue, 28 Apr 2009 16:45:56 +0000

I am republishing this article because so many new resources have been added since the original publishing date. If you know of additional resources that should be added please leave a comment below.

Part of the Photoshop class project is to create a Web site mockup. I have recently found several tutorials that may help you to complete this project. This post is updated as new tutorials are found. I would recommend that you read How to Effectively Organize your Photoshop Layers before you begin these tutorials so you understand how to properly organize your layers for easy XHTML and CSS development.

Create a Sleek, High-End Web Design from Scratch – put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.

Build a Sleek Portfolio Site from Scratch – take a PSD file and build it with some nice clean HTML and CSS.

How to Convert a PSD to XHTML – a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.

From PSD to CSS/HTML in Easy Steps – Part 1 – how to take a PSD file and convert it into a fully CSS based html page. Be sure to check out parts 2, 3, and 4.

From PSD to HTML – how to take the design created for the Fundamentals of Interface Design tutorial and turn that into a usable web interface.

From PSD to HTML, Building a Set of Website Designs Step by Step – entire process of getting from Photoshop to completed HTML. Build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML – a collection of tutorials to help you to convert PSD files to CSS based layouts.

20 Wonderful Photoshop Tutorials for Designing Professional Navigation Menu – a collection of 20 Photoshop Tutorials on creating professional, clean and stylish navigation/menu bars.

For those of you who prefer to use Illustrator, check out Use Adobe Illustrator to Create a Clean Website Layout.

For Fireworks users check out Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 1: Initial design, Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 2: Markup preparation, and Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS

Edit 11/17/08 – DesignMag has come out with a list of Top 10 Tutorials for Converting PSDs to HTML/CSS

Edit 11/21/08 – CSSTricks has numerous videos/podcasts on creating and converting Photoshop Mockups. You can find all of these tutorials and more on their video page.

Edit 12/4/08 – New tutorial, Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!, released at PSDTuts.

Edit 12/15/08 – New tutorial, Converting a Design From PSD to HTML from NetTuts

Edit 2/3/09 – 40 Useful Photoshop Web Layout Tutorials from Six Revisions

Edit 3/17/09 – 60 Layout design tutorials – 60 layout design tutorials, from which you can learn how to make your own website design.

Edit 3/17/09 – 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation – More resources for create Web mockups in Photoshop and converting them to XHTML and CSS based sites.

Edit 3/17/09 – psd2css Online – An online service that allows you to upload your Photoshop PSD file and convert it automatically to an XHTML and CSS based layout. Be sure to read the documentation and tutorials for this service before you begin you begin your project. There is also a forum for support.

Edit 3/24/09 – 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Edit 3/25/09 – Converting a PSD to XHTML/CSS

Edit 3/31/09 – 44 Must Learn Web Design Layout Tutorials in Photoshop – Here is a collection of 44 Web Design Layout Tutorials in Photoshop to teach you create your own layout for your website.

Edit 4/1/09 – 80+ Photoshop Tutorials: Practical Web Interface Design

Edit 4/2/09 – 25 Photoshop Tutorials for Creating that Perfect Web Page Design – Includes some WordPress Mockup tutorials

Edit 4/2/09 – The 100 Most Popular Photoshop Tutorials 2008

Edit 4/2/09 – 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Edit 4/2/09 – 35 Awesome User Interface Design Tutorials

Edit 4/28/09 – Website Layout Toolbox

Edit 4/28/09 – How to Create a Sleek and Textured Web Layout in Photoshop

Edit 4/29/09 – 20+ Best Tutorials to Convert Psd to Html/CSS

Edit 4/30/09 – Make a Professional Business Website Template Using Photoshop

Edit 4/30/09 – How to Create a Simple, Dark Yet Stylish Portfolio Design

Edit 4/30/09 – 52 Professional Website User Interface Photoshop Tutorials

Edit 5/4/09 – How To Build Your Own Single Page Portfolio Website

Edit 5/4/09 – Create a Clean Modern Website Design in Photoshop

Edit 5/5/09 – Top 30 Photoshop Web Design Layout Tutorials

Edit 5/11/09 – How to Convert a Photoshop Mockup to XHTML/CSS – A walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

Edit 5/11/09 – 16 PSD To HTML/CSS Tutorials For Creating Website Layouts.

Edit 5/12/09 – How to Create a “Worn Paper” Web Layout Using Photoshop

Edit 5/12/09 – Create a sleek web 2.0 hosting layout

Edit 5/13/09 – Design a Beautiful Website From Scratch & Coding a Beautiful Website From Scratch: Plus Tutorial

Edit 5/15/09 – Ultimate Round Ups Of Photoshop Interface Design Tutorials

Edit 5/16/09 – 2 Designs From PSD to HTML

Edit 5/16/09 – Create a dark portfolio pixel layout

Edit 5/17/09 – How to Elevate Your Website Design Process and Results

Edit 5/20/09 – How to Create a Clean Web 2.0 Style Web Design in Photoshop

Edit 5/21/09 – 44 Must Learn Web Design Layout Tutorials in Photoshop

Edit 5/26/09 – 5 Page Website Design in Photoshop with Source

Edit 5/26/09 – How to Create a Stunning Grunge Portfolio

Edit 5/26/09 – How To Design Studio Header

Edit 5/26/09 – Design Studio Layout #2

Edit 5/26/09 – Clean Photo Gallery Website Layout

Edit 5/26/09 – Coding: Design Lab TV Styled Layout

Edit 5/26/09 – Watercolored Design Studio Blog Layout

Edit 5/26/09 – Coding: Corporate WordPress Style Layout

Edit 5/26/09 – MyBlues WordPress Style Layout

Edit 5/26/09 – Awesome Tutorial Portfolio Design

Edit 5/26/09 – 33 Excellent Web Layout Photoshop Tutorials

Edit 5/26/09 – 30 Tutorials On Converting A PSD To XHTML And CSS

Edit 5/27/09 – 18 Photoshop Header Tutorials

Edit 5/28/09 – 45 Step-by-Step Tutorials on Web Design with Photoshop

Edit 5/29/09 – Design and Code a Slick Website from Scratch – Part I and Design and Code a Slick Website From Scratch – Part II

Edit 5/29/09 – Coding a Clean Web 2.0 Style Web Design from Photoshop – you may want to complete How to Create a Clean Web 2.0 Style Web Design in Photoshop before beginning this tutorial.

Edit 5/29/09 – Create an awesome portfolio layout

Edit 5/30/09 – Design and code a layout without using slice tool

Edit 6/1/09 – Create a modern blog layout

Edit 6/2/09 – Create a Dark and Sleek Web Layout Using Photoshop

Edit 6/3/09 – 24 Top Sources for Photoshop Website Layout Tutorials

Edit 6/4/09 – 6 Free PSD/(X)HTML-Templates @ Smashing Magazine – Very nice!

Edit 6/4/09 – How to Create a Large Header with a Simple Western Scene

Edit 6/5/09 – 40+ Tutorials on Photoshop Website Design and PSD to HTML

Edit 6/5/09 – Design a Layout for a Non-Profit Organization in Photoshop

Edit 6/6/09 – Design a clear website layout in Photoshop

Edit 6/6/09 – Quality Web Layout Tutorials Roundup

Edit 6/6/09 – Photoshop to WordPress: A Basic Guide

Edit 6/7/09 – 10 excellent website layout tutorials courtesy of psdvibe.com

Edit 6/9/09 – 18 Absolutely Stylish Designs Using Photoshop Brushes and How to’s

Edit 6/9/09 – 6 Free PSD/(X)HTML-Templates

Edit 6/9/09 – Create a web 2.0 layout in Photoshop

Edit 6/9/09 – Design a creative unusual layout

Edit 6/9/09 – 25 Beautiful One Page Portfolio Websites of Designers on Twitter – This is really more for inspiration than a tutorial.

Edit 6/10/09 – 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites

Edit 6/10/09 – 45 awesome Photoshop website template/layout tutorials

Edit 6/10/09 – How to Create a Dark and Sleek Web Design from Photoshop

Edit 6/11/09 – Original Clean Style for Your Website

Edit 6/11/09 – Design a creative clean blog theme in Photoshop

Edit 6/15/09 – 16 Best Photoshop Tutorials for Creating Web Designs

Edit 6/15/09 – Top 30 Photoshop Button And Interface Tutorials

Edit 6/15/09 – Design a two color website layout in Photoshop

Edit 6/15/09 – How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch

Edit 6/15/09 – Website Design Tutorial for Shopping Cart with Source PSD

Edit 6/16/09 – Create a Clean and Colorful Web Layout in Photoshop

Edit 6/16/09 – 20 great tutorials on PSD to XHTML Conversion

Edit 6/19/09 – PSD to HTML Slicing Tutorials

Edit 6/21/09 – Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop

Edit 6/30/09 – WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial

Edit 6/21/09 – Design a premium WordPress blog with Photoshop

Edit 6/22/09 – Creating a tech blog layout in Adobe Photoshop

Edit 6/22/09 – 26 Complete WordPress Blog Design Tutorials

Edit 6/23/09 – 7 Highly Practical Photoshop Site Mockups + 1 Amazingly Detailed Tutorial About Converting Them into Working Web Pages

Edit 6/24/09 – How to Create an Illustrative Web Design in Photoshop and Coding a Clean & Illustrative Web Design from Scratch

Edit 6/28/09 – Photoshop tutorial to design a clean business layout

Edit 7/01/09 – Wordpress Design and Theme Tutorials

Edit 7/02/09 – How to Design a WordPress Theme in Photoshop

Edit 7/05/09 – Creating an Amazing Layout Using Textures

Edit 7/07/09 – Wordpress Layout #5

Edit 7/07/09 – Web Design Layout #10

Edit 7/08/09 – Create a webdesign company layout in Photoshop

Edit 7/08/09 – 70 Tutorials Using Photoshop To Design A Website

Edit 7/08/09 – Let’s Design Rock’n’Rolla Website Design Tutorials

Edit 7/09/09 – Web Design Tutorials: The Ultimate Roundup

Edit 7/09/09 – Web Site Design Tutorial: Wellknown.as Case

Edit 7/10/09 – Coding a Clean & Illustrative Web Design from Scratch

Edit 7/10/09 – Create a Stylish Business Layout in Photoshop

Edit 7/12/09 – SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

Edit 7/13/09 – Top 20 User Interface Design in Photoshop

Edit 7/13/09 – How to Design a Portfolio Site

Edit 7/13/09 – 30+ Easy To Follow Photoshop Layout Design Tutorials

Edit 7/13/09 – Web Design Layout #10: Sitebuild

Edit 7/14/09 – Create a communication layout in Photoshop

Edit 7/14/09 – 23 Inspirational Photoshop Tutorials For Creating Impressive Web Layouts

Edit 7/15/09 – 8 Tutorials about How to create a WordPress theme

Edit 7/15/09 – Essential Web Designers Guide on PSD to HTML/CSS – Scroll down the page to see the tutorials

Edit 7/15/09 – How to Design a Space Futuristic Gallery Layout in Photoshop

Edit 7/19/09 – Design a travel PSD layout with Adobe Photoshop

Edit 7/19/09 – 30 Web Design Tutorials from Scratch in Photoshop

Edit 7/20/09 – How to Make a Green & Sleek Web Layout in Photoshop

Edit 7/21/09 – Software Layout #4

Edit 7/24/09 – 10 awesome PSD to XHTML tutorials

Edit 7/24/09 – Design a creative wordpress theme

Edit 7/26/09 – 160+ Mega Web Design Tutorial Roundup

Edit 8/04/09 – Create a Portfolio Layout with Wooden Background in Photoshop

Edit 8/04/09 – Create A Forum Layout Using Photoshop

Edit 8/08/09 – 33 Newly Fresh Web Design Layout Tutorials

Edit 8/08/09 – Create a Nature Inspired WordPress Layout

Edit 8/09/09 – Design web 2.0 wordpress themes

Edit 8/09/09 – Portfolio Themes in WordPress, Examples and Tutorials

Edit 8/10/09 – How To Create a Green Grunge Web Layout

Edit 8/10/09 – 50 Really High Quality Photoshop Navigation Menu Tutorials

Edit 8/10/09 – 25 Detailed Tutorials for Coding Up Your Web Designs

Edit 8/10/09 – 11 Excellent Clean Corporate Style Layout Tutorials

Edit 8/10/09 – How to Create a Clean Blog Design with Photoshop

Edit 8/16/09 – 90 New And High Quality Photoshop Web Layout Tutorials

Edit 8/16/09 – Create An Orange Web Layout Using Photoshop

Edit 8/17/09 – How to Effectively Organize your Photoshop Layers

Edit 8/19/09 – Create an amazing consulting layout

Edit 8/19/09 – Design a corporate WordPress layout

Edit 8/20/09 – 22 Photoshop Web Design Interface Tutorial Sites

Edit 8/23/09 – Business Layout #6

Edit 8/26/09 – How to Design the Web in a High-Def World

Edit 8/26/09 – Design a creative cosmetics layout with Photoshop

Edit 8/30/09 – Design an impressive web hosting layout

Edit 8/30/09 – Over 500 Layout Design Tutorials

Edit 9/1/09 – How to Design and Code a Flexible Website

Edit 9/1/09 – YoDaa – The Design Process

Edit 9/1/09 – Design a breath-taking portfolio layout

Edit 9/1/09 – Design a Transparent Website Layout in Photoshop

Edit 9/8/09 – How to Create a Dark and Sleek Blog Design in Photoshop

Edit 9/8/09 – Create a Web Layout with 3D Elements using Photoshop

Edit 9/15/09 – Design A Clean And Fresh Company Website In Photoshop

Edit 9/15/09 – How to Make a Light and Sleek Web Layout in Photoshop

Edit 9/15/09 – Making the ‘Clean Grunge’ Blog Design

Edit 9/15/09 – Create a web 2.0 business layout

Edit 9/15/09 – Create a Business PSD Layout in less than 10 minutes*

Edit 9/15/09 – Wordpress portfolio layout

Edit 9/16/09 – Photoshop 101 – Working with Slices

Edit 9/16/09 – Create An Orange Web Layout Using Photoshop

Edit 9/16/09 – How To Create a Green Grunge Web Layout

Edit 9/16/09 – Design a Beautiful Website From Scratch

Edit 9/16/09 – Learn a Professional Workflow for Illustrating a Comic-Style Header Image

Edit 9/16/09 – Create a Professional Portfolio Design in 17 Easy Steps

Edit 9/16/09 – How to Design a WordPress Theme in Photoshop

Edit 9/16/09 – Create a grunge personal portfolio layout

Edit 9/16/09 – How to Create a Unique Wordpress Theme

Edit 9/16/09 – Design a Furniture layout or a Manufacturer layout

Edit 9/16/09 – Design a creative design studio layout

Edit 9/16/09 – 70+ Ultimate Round-Up of Free PSD Website Templates

Edit 9/17/09 – How to Create a Minimalist and Typographic Blog Layout From Scratch

Edit 9/17/09 – Design an amazing 3d hosting layout

Edit 9/17/09 – Software Layout #5

Edit 9/21/09 – How To Create Professional Looking Website Layout With Photoshop

Edit 9/22/09 – Create a wordpress interface in Photoshop

Edit 9/23/09 – How to Create a Unique Colorful Site Layout

Edit 9/25/09 – Create a photorealistic web layout – CSS/XHTML available

Edit 9/28/09 – Build a Promotional iPhone App Website Wireframe in Fireworks

Edit 9/28/09 – MakingSEO coded, Free CSS Template with PSD-to-HTML tips and Design A Clean And Fresh Company Website In Photoshop

Edit 9/29/09 – How to Make an Impressive Blog Layout in Photoshop

Edit 9/30/09 – Create a Promotional iPhone App Site in Photoshop

Edit 10/2/09 – How to design a simple and sleek web Portfolio

Edit 10/5/09 – Create a Very Simple Portfolio Web Layout with Photoshop

Edit 10/6/09 – Design a car dealer website layout with Photoshop

Edit 10/13/09 – Design a Clean Portfolio Site in Photoshop and How to Code a Clean Portfolio Design (Plus Free Five-Page Template)

Edit 10/13/09 – BoxedArt Website Design Tutorial

Edit 10/13/09 – The Pencil Project – The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Edit 10/13/09 – Create a Hosting Layout #2 in Photoshop, Hosting Layout #2: Sitebuild Pt.1, and Hosting Layout #2: Sitebuild Pt.2

Edit 10/13/09 – Create a Wordpress Layout #6 in Photoshop

Edit 10/13/09 – Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings)

Edit 10/15/09 – Designing for WordPress: Complete Series & Downloads

Edit 10/15/09 – Screencasts – Building a Website (1 of 3): Photoshop Mockup, Building a Website (2 of 3): HTML/CSS Conversion, and Building a Website (3 of 3): WordPress Theme

Edit 10/20/09 – How to Make a Creative Blog Layout

Edit 10/21/09 – From Photoshop to Wordpress – Part I – Design and From Photoshop to Wordpress – Part II – Coding. Watch the Web Squeeze for Part III

Edit 10/21/09 – Web Design Layout #11

Edit 10/21/09 – 30 Photoshop Tutorials for Creating Web Layouts and UIs

Edit 10/21/09 – How To Create a Pure CSS Polaroid Photo Gallery

Edit 10/23/09 – 20 Mind Blowing Website Layout Tutorials in Photoshop

Edit 10/23/09 – Create a Clean Business Web Template Design in Photoshop

Edit 10/26/09 – The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Edit 10/26/09 – 75 PSD to HTML Resources for Web Designers

Edit 10/30/09 – 26 Complete WordPress Blog Design Tutorials

Edit 10/30/09 – Design a Minimal and Modern Portfolio Layout with Photoshop and Minimal and Modern Layout: PSD to XHTML/CSS Conversion

Edit 10/30/09 – 40 Quality Photoshop UI Design Tutorials

Edit 11/19/09 – How to Design a Band Website Layout in Photoshop

Edit 11/24/09 – Create a Clean and Colorful Web Layout in Photoshop

Edit 11/24/09 – Create a gritty website layout

Edit 11/24/09 – Create an advanced game or clan layout

Edit 11/24/09 – Create a clean hosting layout

Edit 11/24/09 – Design a colorful theme for wordpress

Edit 11/24/09 – Create a nature inspired layout in photoshop

Edit 11/24/09 – Create an Apple inspired website layout in Photoshop

Edit 11/24/09 – How to design a simple and sleek web Portfolio

Edit 11/24/09 – Top 10 Tutorials To Learn PSD To HTML Conversion

Edit 11/25/09 – Business Layout #7

Edit 11/25/09 – The Design Lab #2

Edit 11/25/09 – Windows 7 Inspired Navigation

Edit 11/30/09 – Web Design Process: Zee Site

Edit 11/30/09 – Design a wordpress theme from scratch – Theme available

Edit 12/3/09 – Cloud9 Web Design Layout

Edit 12/8/09 – Create a Watercolor-Themed Website Design with Photoshop

Edit 12/8/09 – 25 Photoshop Tutorials for Designing Portfolio Sites

Edit 12/9/09 – Top 10 Tutorials for Converting PSDs to HTML/CSS

Edit 12/14/09 – How to Make a Highly-Textured Site Layout in Photoshop

This post is updated as new resources are found on the Web.

100+ Best Web Galleries Around for Your Inspiration

Robin Wood — Wed, 11 Feb 2009 23:56:20 +0000

This is a terrific collection of CSS galleries for inspiration and education. As you view the sites be sure to use the Web Developer toolbar in Firefox to view the source code (View Source > View Source) and to view the CSS (CSS > View CSS).

Click to View the Web Developer Toolbar

Now days CSS Galleries are great for improving your website’s traffic and pagerank. Getting a site featured in some of the popular galleries can bring thousands of visitors and many valuable inbound links with excellent SEO benefits. These galleries are platform where every other design challenges your creativity. However these galleries are a great source of inspiration for designers which help them to get exposure for their work.

The galleries of CSS-based designs showcase exemplary design trends, new practices, creative ideas and designer’s skills. There are so many different galleries out there that it’s even hard to decide which ones are worth to spend our valuable time on.

Continue reading 100+ Best Web Galleries Around for Your Inspiration at instantShift

Web Design Trends For 2009

Robin Wood — Thu, 15 Jan 2009 16:37:15 +0000

We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge.

Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Continue reading Web Design Trends For 2009

Be sure to check Smashing Magazine for the follow-up article next week.

Building Your Own Portfolio Site

Robin Wood — Thu, 15 Jan 2009 15:30:24 +0000

By the time you complete the ROP Web Design and Development Program you should have created several live Web sites to share with employers via projects that are required during the course. Web Designers/Developers, artists, and photographers create Web-based portfolios to showcase their work. You may find it difficult to get started creating your own portfolio, so here are some portfolio sites to help you with ideas and inspiration for creating your own Web portfolio.

14 Quick and Slick Portfolio Templates (via ThemeForest) – Having an online portfolio is pretty much a no-brainer these days. But all too often it’s the old story of the cobbler’s children who have no shoes – or in our case the designer who has no time for their own portfolio. Whether it’s because there’s too much work on, or because you can’t settle on a design, or because you’re somewhere in the middle of building the “perfect” portfolio, sometimes you just need to get something together, and fast.

Five steps to a better design portfolio – Excellent article on best practices for developing a portfolio.

50 Beautiful And Creative Portfolio Designs – In this showcase, you’ll find a variety of beautiful, unique and highly creative portfolio designs. The aim here is to stimulate your creativity and inspire you to create your own portfolio or re-think your existing one. You’ll see portfolios from a wide range of fields, including Web design, product design, illustration, photography and even animation. So, we now present to you 50 beautiful and creative portfolio designs.

Creating A Successful Online Portfolio – Creating a successful portfolio is easier than you think. Focus on simplicity, ease of use, hitting your objectives, professionally managing the project, and you’ll end up with a successful portfolio. In this article we’ll review 5 pitfalls that commonly plague portfolio design. Then we’ll cover Portfolio Tips that if carefully considered and well executed will deliver quality results for your portfolio.

The One Page Graphic Design Portfolio Guide – An article on creating a one page portfolio site with a lot of useful information.

Graphic Design Portfolio Projects – Some ideas on how to gain experience and portfolio pieces.

Web Design Stuff Portfolio Showcase – Real designers portfolios that have been rated by users. Lot’s of inspiration at this site.

24 Kick Ass Portfolio Designs – More inspiration, many of these are one page portfolio sites.

Tips for Building Your Graphic Design Portfolio – Five simple tips for creating a portfolio.

DesignFirms Portfolio Showcase – Thousands of portfolio sites for inspiration and ideas.

Promote your skills online – Good, basic advice for building a portfolio site.

How to Make Your Portfolio Site More Effective by Adding a Blog – This article discusses why you would want to add a blog to your portfolio site.

101 Awesome Portfolio Sites – 101 Awesome Portfolio Sites for inspiration. Also check the related links at the bottom of this page.

Edit 2/13/09 – 7 Tips For Improving Graphic Design Portfolios

Edit 8/18/09 – The Remedies For A Great Designer Online Portfolio With 25 Impressive Showcases

Edit 9/15/09 – 99 Creative And Beautiful Looking Portfolio Designs