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.

In his post, Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings), Pievincenzo outlines his four step process for developing WordPress themes and includes links to tutorials for developing themes in Photoshop, converting Photoshop (PSD) files to a HTML/CSS layouts, coding specifically for WordPress, and finally hacks (suggestions) to improve your themes.

This is a great roundup of resources, so be sure to check it out along with the other great tutorials and resources at PV.M Garage.

I know that I post and tweet a lot of resources and I overwhelm you with information at times. So I’ve decided to feature a tutorial site on a weekly basis that I think offers quality tutorials that contain enough detail and are easy for a beginner to understand. I’m still going to twitter my heart out – you’ve selected a career path that truly requires “lifelong learning” and I AM a “Resource Monster”.

Drum roll please!

Minervity.com is a site by the talented Web and Graphic Designer, Richard Darell. Richard strives to create tutorials that are “open to all levels of users”. He has succeeded in doing this by writing detailed and easy to follow tutorials that contain lots of screen captures to help you with the proper effect settings. I also love Richard’s conversational writing style; it makes you feel as if you’re sitting right next to him while learning.


Here are some of Richard’s Photoshop tutorials:

1. How to Create a Realistic Chrome Text Effect
2. 2 Ways To Create Realistic “Depth of Field”
3. How to Create a Realistic “Neon” Sign Text Effect
4. How to Create a Realistic 3D “Stone” Text Effect
5. Mastering “Bevel and Emboss” – From Beginner to Pro
6. How to Create a Realistic Game Boy
7. How to Create a Realistic iPhone

Now you may think that you have no reason to learn “How to Create a Realistic iPhone”, but you would be wrong. This tutorial teaches you how to create shadows, reflections, shapes, surfaces, and textures that look real. These are skills you must have as a designer. Plus you can say you have an iPhone.

Minervity.com isn’t all Photoshop. You’ll find articles on Illustrator, Flash, CSS, PHP, icons and inspirational roundups.

Richard is kind enough to share his knowledge with all of us. I can honestly say he is an awesome guy – friendly, engaging, and helpful. Over 14,000 people are following Richard, @Minervity, on Twitter and you should be too!

If you are not following me on Twitter, @RobinMWood, you may be missing some of the great articles that I have come across and posted for your review. I am going to start posting them here by topic on a weekly basis, so that we will have an archive of resources for class.

When you are looking at the resources below they may look rather strange, Twitter has it’s own “lingo” since all posts must be 140 characters or less. You may want to review some of the tutorials at 13 Twitter Tips and Tutorials for Beginners if you have never used Twitter.

A few quick tips:

You will see words with # (hash symbol) like #photoshop and #illustrator – these are called hashtags. Clicking on a hastag below will search Twitter for Photoshop or Illustrator related links. There are numerous hashtags, you may want to check out http://hashtags.org/ to see what’s happening on Twitter right now.

@robinmwood is a Twitter username, clicking on a username will bring up the user’s profile and their most recent posts. You can read what they have shared or “follow” them to see their future posts.

RT means Retweet, another user posted the article and I retweeted because I thought it would be of interest to people who follow me.

Photoshop and Illustrator Articles

1. Orton Effect – #Photoshop #photography http://bit.ly/T0P8Y
2. 24 Text Effect #Photoshop Tutorials http://bit.ly/7Ysj5
3. Draw a Cute Glossy Star via 3 Easy Steps in #Photoshop http://bit.ly/17dq2A
4. Website Design Tutorial for Shopping Cart with Source PSD #photoshop http://bit.ly/1a6xoc
5. How to Create a Grunge Web Design Using #Photoshop http://bit.ly/Syzfi from Six Revisions
6. Design a two color website layout in #Photoshop http://bit.ly/11LGYT
7. RT @psdfan: New from PSDFAN: Create a Kick-Ass Martial Arts Scene http://bit.ly/qlLJS #photoshop
8. 18 Awesome #Photoshop Text Effect Tutorials http://bit.ly/Q3kRd
9. 30+ Useful #Photoshop Custom Shapes Set http://bit.ly/sxWXI
10. Changing A Background With The Magic Wand Tool #photoshop #photography http://bit.ly/YOUJr
11. Post-processing of a Graduation Photo #photography #photoshop http://bit.ly/17DtD7
12. RT @PeterNeillPhoto @jpons Option Key when sharpening in #Lightroom http://cli.gs/p7aZQT #photog #togs
13. Understanding the basics of Sharpening in #Photoshop http://bit.ly/cLTzU
14. Aurora Borealis Wallpaper in #Photoshop http://bit.ly/LGqTF
15. RT @mlane: An even easier Lomo solution if you have Lightroom: http://bit.ly/AhjFs (via @ngassmann) Preset
16. #Photoshop Tutorial, Create Logo with Transparent Glass Text http://bit.ly/jZoFR
17. Add a light Source in #Lightroom in 5 Easy Steps http://bit.ly/4WyGG
18. RT @DianaKhalil @iBlend: How to Design a Standard Firefox Logo http://tinyurl.com/nm3bw7 #photoshop
19. Design a creative clean blog theme in #Photoshop http://bit.ly/10TBYV
20. RT @iBlend @DannyOutlaw: Design a Cool Outlaw Flyer with #InDesign Tutorial http://tinyurl.com/m5l5gt
21. 45 awesome #Photoshop website template/layout tutorials http://bit.ly/1Y9q
22. RT @mlane: 30 Best #Photoshop Web Layout Design Tutorials to Design Decent Websites – http://bit.ly/MIvU5
23. RT @photoshoptips: #Photoshop Simple, Sleek & Stylish Text Effect – http://bit.ly/18SOPp
24. 30+ Most Wanted Photo Manipulation Tutorials in #Photoshop Part I http://cli.gs/VvdUXa (via @webupd8) (via @IsaacVanName)
25. #Resources | 20 #Photoshop Brushes To Lighten Professional Designs http://tinyurl.com/kl4hw4 (via @pixel_jockey)
26. RT @bkmacdaddy Give your #photos a retro makeover with cross processing http://ow.ly/dnjR #design (via @gaksdesigns @ArtsySoul)
27. #Photoshop Quick Tips #10: Using Pattern Overlay http://bit.ly/Rxryt
28. Using #Photoshop Styles to create awesome web2.0 effects in no time http://bit.ly/8aKMw
29. How to Make an Eye-Catching Logo http://bit.ly/5dUvj
30. RT @DesiznTech @gaksdesigns: 80 Best-Of Illustrator Tuts, Brushes,etc http://showip.be/url/fb9
31. Top 30 PSD Templates from Themeforest – http://ow.ly/dcdy (via @DesignHouston) #photoshop
32. Creating a Spy Fly Photo Manipulation #photoshop http://bit.ly/eu9Qt
33. Creating an amazing Palm Pre #icon in #Fireworks at Abduzeedo – http://bit.ly/Gg6O (via @fabianome @abduzeedo)
34. Create a web 2.0 layout in #Photoshop http://bit.ly/OHfbw
35. How to Batch Resize in #Photoshop http://bit.ly/23pcqR #photography
36. Simple Coffee Cup #Icon #Photoshop Tutorial http://bit.ly/xGhz1
37. How to Create a Slice of Nature Photo Manipulation #photoshop http://bit.ly/QZSV2
38. RT @DesiznTech: Photo Strip #Photoshop Tutorial http://bit.ly/jcHaB
39. 18 Absolutely Stylish Designs Using #Photoshop Brushes and How to’s http://bit.ly/AQ73T
40. RT @devongovett: #Illustrator Drawing Tools, Part 5: Pen Tool – Curves http://ff.im/-3HcQc
41. RT @ManiKarthik @styletime: 11 Tutorials for Business Card Design http://bit.ly/PQs4 #photoshop #illustrator
42. 10 excellent website layout tutorials courtesy of psdvibe.com http://bit.ly/uD5nt
43. #Photoshop to #WordPress: A Basic Guide http://bit.ly/JTjkZ
44. Create a Lightning Effect Scene in #Photoshop http://bit.ly/DbYJ0
45. Digital-Photography: Fluid Mask 3 Review http://tinyurl.com/qeoo62 Full http://tinyurl.com/pxwxle (via @PhotoCriticNews)
46. Free Twitter Background Templates in #Photoshop PSD: Paperworks. http://bit.ly/2bMkc (via @mayhemstudios)
47. RT @mayhemstudios: 20 #Photoshop Tutorials Inspired by Movie Films @blueblots http://bit.ly/twqwJ
48. Twitter Background Design Pack http://bit.ly/sEI6k
49. Design a Layout for a Non-Profit Organization in #Photoshop http://bit.ly/OBAsl
50. How to Create a Mosaic Portrait from a #Photograph #illustrator http://bit.ly/12l2Q
51. Precise Color Cast Correction With Gray Fill Layers http://bit.ly/7j32P #photography #photoshop
52. Best #Photoshop Tutorials, Brushes and Textures of May 2009 http://bit.ly/Ao0Su
53. 6 Free PSD/(X)HTML-Templates http://bit.ly/g96kg
54. 22 Excellent #Photoshop Brushes to Spice Up Designs http://bit.ly/A0czu
55. Free PSD Twitter Background Template http://bit.ly/PqIQF
56. RT @VECTORTUTS: How to Create a Fun, Illustrated Skateboard Design http://bit.ly/MU0Ue (via @spicydesign)
57. RT @TheWebBlend: 45+ Stunning Tutorials, Inspirations And Resources For Designers for May http://bit.ly/rDWTK
58. Create a Dark and Sleek Web Layout Using #Photoshop http://bit.ly/17Hxgm
59. Filter Forge plugin has 6000 Photoshop filters http://blog.photoframd.com/?p=719 #photoshop #photography via @photoframd
60. RT @designfeed: Meat Text Effect in #Photoshop http://bit.ly/ncdLz
61. Smooth skin in #Photoshop http://bit.ly/XkNkn (via @Tutostube)
62. RT @blellow @mayhemstudios @mlane: 22 Extremely Well Written #Icon Design #Tutorials – http://bit.ly/KGshG #photoshop
63. Create a modern blog layout in #Photoshop http://bit.ly/HqfqT
64. How to Create a Virtual Auto Using 100% Brush Techniques #photoshop http://bit.ly/uflYk
65. Design and code a layout without using slice tool #photoshop http://bit.ly/Rzh0f
66. RT @photoframd: #photoshop Tutorial Clipping mask http://tinyurl.com/klkgw7 (typo’s, but great tut! (via @deluzione)
67. 30 Mind-blowing #HDR Images + 10 Useful Articles to Get Your Started on Creating Them #photoshop http://bit.ly/MoQhu
68. Best of the Web – May 2009 Vectortuts+ http://bit.ly/1FI5L #illustrator
69. Create an awesome portfolio layout http://bit.ly/g11lX #photoshop
70. Reader #Tutorial: Dark Water in #Photoshop http://bit.ly/Wmqa0
71. How to Create a Realistic “Neon” Sign Text Effect in #Photoshop @Minervity http://bit.ly/10AkKW
72. RT @photoshoptips Create vector and cartoonish characters: Top 25 #Photoshop tutorials #illustrator http://bit.ly/2sSPL
73. Transform into winter landscape using #photoshop: Creative photo montage. http://bit.ly/i9dQp (via @the_djp)
74. Create A Stunning Sports Scene In 10 Simple Steps http://bit.ly/LNUAw (via @DesignNewz) #photoshop
75. RT @code8 @Minervity 52 Professional Website User Interface #Photoshop Tutorials – http://bit.ly/CqHah (via @mck66)
76. Design and Code a Slick Website From Scratch –Part II http://bit.ly/F2asQ Part 1 http://bit.ly/rWlsb
77. Tilt-Shift #Photography – 80+ Beautiful Examples, #Tutorials and More | Ultimate Guide http://bit.ly/10ykYU #photoshop
78. RT @WonderWy: 25 Ways to Spice Up Blog #Photos http://bit.ly/7KCoU #photoshop
79. Coding a Clean Web 2.0 Style Web Design from #Photoshop http://bit.ly/bLR6U
80. RT @photoshoptips: Easy Way To Fake HDR Photos In #Photoshop – http://bit.ly/pkuwJ
81. 16 Great #Photoshop Tutorials for #Photographers http://bit.ly/PvwG
82. 45+ Beautiful Light Abstract #Photoshop Brush Sets http://bit.ly/QRxIT very cool!
83. Abduzeedo’s Text Effect Tutorials http://bit.ly/KCnvZ #photoshop
84. 10 Free Hi-Res Dripping Circle #Photoshop Brushes http://bit.ly/qqPRc
85. RT @ViralGFX: 18 #Photoshop Header Tutorials | http://bit.ly/sUrQZ
86. 25 Nice #Photoshop Tutorials for Web Designers –> http://bit.ly/jApp2 #design #photoshop (via @jeremymorgan)
87. #Photoshop Pen Tool: The Comprehensive Guide http://bit.ly/jeKVF (via @PSDTUTS)
88. HDR Test: FDR Tools & Dynamic Photo HDR – Part 1 http://tinyurl.com/qababg #photography #photoshop #hdr (via @photoframd)
89. designmag: 110 Ultimate Round-Up of Free #Photoshop PSD Files and Resources http://tinyurl.com/mjn3qn (via @webprocafe)
90. 45 Step-by-Step #Tutorials on Web Design with #Photoshop http://bit.ly/AO6OT RT @creattica @PSDTUTS @styletime
91. RT @crazyleaf: New on zaBox : 10 Useful #Photoshop tips and tricks | Best Design Options http://tinyurl.com/pdkkqs
92. RT @ronicadesign: 30 Tutorials On Converting A PSD To #XHTML And #CSS > http://bit.ly/qJEJJ #photoshop

1. RT @mayhemstudios @Jason_Pollock @cheth: 400+ Beautiful twtter Icons 4 yr Website | Blog Godown http://bit.ly/Ni7yC
2. RT @DesignerDepot: 33 Excellent Web Layout #Photoshop Tutorials: http://tinyurl.com/qoyp7h
3. RT @PSDTUTS: 40 Logo Design Tutorials http://bit.ly/OmuMg #photoshop #illustrator
4. Zixpk.com – Gorgeous #wallpapers and more http://www.zixpk.com/
5. RT @blellow @myreactiveone @DesignerDepot 10 Tips for #Photoshop beginners: http://tinyurl.com/o4bdwg
6. 15 Free Amazing Social Icons Sets For Your Blog http://bit.ly/16QR0
7. RT @eExecutives: What to do when you don’t know what to do in your #job search: http://bit.ly/crpRA (via @jlipschultz)
8. Reading: 14 MORE Tools of Highly Effective Twitter Users – http://is.gd/FHh1 (via @problogger)
9. Applications: One Day in the Life of a Web Designer http://bit.ly/dNnbb
10. Formatting Typography and the Use of Styles in Adobe #InDesign http://bit.ly/RMVsT
11. RT @10steps Sewing a Fabric Badge in #Photoshop http://bit.ly/NeqLL
12. 32 Free Vectors – Mega #Vector Mix Collection http://bit.ly/8aisf
13. 5 Page #Website Design in #Photoshop with Source | Tutorial Lounge http://tinyurl.com/o7xjyh (via @photoframd)
14. Aperture Explained http://bit.ly/lvhfr #photography
15. Career Advice – 5 Tips to Using the Informational Interview to Find Your Dream #Job http://bit.ly/Gx63u
16. RT @DesiznTech: Desizn Tech :How to Create a Stunning Grunge Portfolio http://bit.ly/T8WX3 #photoshop
17. CyberNotes: Firefox Extensions cause Memory Leaks and Crashes http://bit.ly/16xQVe
18. Minimem memory optimization solution http://bit.ly/iv52o #firefox #tweetdeck
19. 46 Sites To Get Inspired And Familiar With Hand Drawing Style http://bit.ly/jznyb (via @DesignNewz)
20. RT @photoframd 23 Best Fire Effects in #Photoshop http://bit.ly/SDZLb
21. Beginner #Illustrator Tutorial – Create a Vector RSS Icon http://bit.ly/s9Abk
22. 22 Neat Code Editors for Windows http://bit.ly/yJRic
23. RT @djR3Z: 33 best #photoshop tutorials of May 2009 http://bit.ly/coTv5 (via @BuzzEdition)
24. 22 Creative Uses of Robots in #Web Design http://bit.ly/32L4fT
25. RT @blellow @chadengle @kristofcreative: 10 #Twitter Hacks For #WordPress http://bit.ly/148NV7 (via @cameronolivier)
26. RT @blingafe @PSDTUTS: Graphic Design Week Wrap-up http://bit.ly/18CY1u #photoshop #illustrator #indesign
27. Suggestions for moms headed back to work http://bit.ly/LWclv (via @twitlinker) #jobs #career
28. Amazing post about twitter in the classroom: http://bit.ly/aTOJk (via @lgesin)
29. RT @bkmacdaddy: 30 Best #Photoshop Abstract Effect Tutorials - http://bit.ly/rBca4 #design (via @divyasharad)
30. Updated: How To Modify #WordPress Themes The Smart Way http://bit.ly/1afyY5 (via @iandstewart)
31. Checking out: 10 Online #Photography Magazines We Love http://bit.ly/E7IA4 (via @blingafe)
32. 9 Things You can do with Categories in #WordPress – http://bit.ly/1XaPD (RT @bkmacdaddy @ruhanirabin)
33. CrazyLeaf Design Blog : Surf #Photography… http://inblogs.org/go/nl3xc (via @inBlogs) Wow!
34. RT @abduzeedo: Awesome Milk Typography Effect in #Photoshop http://tinyurl.com/ovelqg (via @iBlend)
35. RT @pranavrastogi Download “Colors” – A free Colorful #WordPress Theme http://bit.ly/WcSL8 (via @naldzgraphics)
36. RT @iblend @sharebrain How to Draw A Cute Clownfish in #Photoshop http://tinyurl.com/p7ts74
37. 35 Amazing Things You Didn’t Know Your PC Could Do! http://bit.ly/O9Ke6 *Yup, you read that right, a PC! (via @FlashDenNet)
38. RT @DianaKhalil @Minervity How To Create a Realistic Water Text Effect – http://bit.ly/jSEdX #photoshop
39. RT @DianaKhalil @mayhemstudios @Minervity 52 Professional Website User Interface #Photoshop Tutorials http://bit.ly/CqHah
40. RT @DianaKhalil @Minervity @rockstaronline +60 Fantastic #Creative #Photo #Inspiration http://bit.ly/WBUe2
41. RT @BuzzEdition @mayhemstudios @Minervity 5 Different Ways To Create Stylish Contact Form Layouts – http://bit.ly/vyBFf
42. RT @ahdesign @VideoHive @redheaddesign 30 Excellent #WordPress Video Tutorials http://bit.ly/OktkQ
43. 150 valuable #Photoshop Action sets + Tutorials http://bit.ly/UEjW8 (via @Tutostube)
44. RT @mayhemstudios @santoscreative @mlane @Minervity What the future of web fonts is looking like http://bit.ly/yrWIg
45. How to #Photograph Baseball http://bit.ly/14vaHR #photography
46. 12 Awesome links shared on Twitter http://bit.ly/TxZDo
47. Top 20 Colour Application #Photoshop Tutorials http://bit.ly/137cbX
48. Ultimate Cheat Sheet Collection http://bit.ly/19Qmmo #html #css #php #jquery #photoshop #illustrator
49. Design a Ready to Print Brochure in #Photoshop http://bit.ly/zDgxB
50. RT @GabeSEO @blellow @pimpmywordpress A collection of 30 free stock photo sites http://budurl.com/3qz2
51. RT @saurabhshah @iamkhayyam @mparent77772: Essential #WordPress Plugins For Small Business http://bit.ly/EZ8oM
52. RT @gaksdesigns: 50 Best Tutorials To Design Wallpapers-http://bit.ly/BzKCa #photoshop #illustrator
53. How to End Suffering http://bit.ly/75r45
54. RT @FlashDenNet: The Art of Building Self-Esteem http://bit.ly/yXAtX
55. RT @FlashDenNet: It’s Like Firebug, but for Flex Apps: FlexSpy http://bit.ly/wlyUz
56. RT @webaddict @BuzzEdition @mayhemstudios Properly Set Up Your Twitter Background For ALL Resolutions http://bit.ly/Lkurw
57. The Everyday Web Expert : Customer Service is a MUST!… http://inblogs.org/go/ep8yj (via @inBlogs)
58. 43 Really Useful #Photoshop Tutorials For Excellent 3d Effects http://bit.ly/GtdV (via @dustyedwards)
59. JOB SEARCH: Social Media to Get a #Job? http://bit.ly/11MKPZ (via @danschawbel)
60. 10 #Powerpoint Tips for Preparing a Professional Presentation http://tinyurl.com/ptb35f (via @deliciouspop)
61. Design an awesome web layout based on typography http://tinyurl.com/q56jxc (via @pulseblogger) #photoshop
62. 30 Beautiful Web Designs Inspired by Nature http://bit.ly/bCH0n (via @phaoloo)
63. How to Create a Realistic 3D “Stone” Text Effect – http://bit.ly/12mPit (via @mayhemstudios @minervity) #photoshop
64. Jan, @mj12982, updated her layout tutorial http://is.gd/BHvR to include instructions on diagonal lines (via @jggube) #photoshop
65. Tweeting Your Way to a Job – http://is.gd/C4A2 (via @copyblogger)
66. 6 (More) Free File Hosting Websites That Would Be Useful – http://bit.ly/HSCWF (via @mlane)
67. Art of Choosing Right Keywords http://bit.ly/vTRTz (via @rob_dale)
68. Huge (Inspirational) Resource: 500 Free Premium #WordPress Themes Gallery – http://bit.ly/zi12g (via @mlane)
69. How to Use a Blog to Post Your #Resume http://bit.ly/19g33g
70. Create a Dark Abyss with an Emerging Blue Light #photoshop http://bit.ly/E1JLG
71. RT @briancray: The Future of Open Source CMS – by 23 Web Designers & Developers | Dezinerfolio http://tr.im/m8OW
72. Create and Print a Brochure with #Photoshop, #Indesign and UPrinting.com – Part 1 http://bit.ly/j6rLd
73. 9 Things to Understand About a Client When Starting a Design Project http://bit.ly/AoJOz
74. RT @David_North @techandlife 15 Common WordPress Blunders http://bit.ly/179OvZ (via @hashwordpress)
75. How to Create Screencasts – Nettuts+ http://bit.ly/3O1OUV (via @deliciouspop)
76. RT @ruhanirabin: 11 ways to increase your RSS feed count http://twurl.nl/m0nzcj (RT @giographix @DianaKhalil) #wordpress
77. RT @DesiznTech: 20 Useful Websites for Graphic Design Textures and Patterns http://bit.ly/kseJx Please Some digg guys
78. RT @inBlogs: Layers Mag: Why does #HDR bring out the best/worst in you as a #Photographer? http://inblogs.org/go/ewqiv
79. RT @3drockz: 30 Artistic and Creative Resumes  http://tr.im/m7Tq
80. RT @photoshoptips: 23 Most Incredible #Photoshop Tutorials http://snurl.com/ikd9l
81. RT @spicydesign: 150+ Beautiful #Twitter #Icons And Buttons http://bit.ly/LeRez
82. An Open Source And Free Invoicing Web Application http://tinyurl.com/qb5tgy (via @SmashingApps)
83. RT @hashphotoshop Design a realistic website layout in #photoshop http://inblogs.org/go/zhdrd (via @inBlogs @webbtech)
84. Digg Design: Web Design Industry Jargon: Glossary and Resources http://bit.ly/SjQIv (via @justdesign)
85. Take The Plunge Into #Freelance Work http://bit.ly/O1fIx (via @DesignNewz)
86. CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe http://bit.ly/2IiDeC (via @GRAPHACTORY) #css
87. Quick Picks: Two Must-Have Resources for Designers http://bit.ly/pjxim (via @ViralGFX)
88. RT @abduzeedo: Tutorial: Making a Planet in #Photoshop http://tinyurl.com/rchdns (via @iBlend)
89. RT @smashingmag @stevensnell How to Set Up a Killer #WordPress Testing Environment Locally – http://is.gd/C2YD
90. RT @DianaKhalil @designfeed How To Be The Freelancer That Everyone Wants To Work With http://bit.ly/YYdCx
91. New blog post: Northern California Career and Leadership Summit http://bit.ly/wBC5S
92. RT @abduzeedo: Tutorial: Making a Planet in #Photoshop http://tinyurl.com/rchdns (via @iBlend)
93. RT @CreativeOpera @andysowards New blog post: #WDNDL For 5/20/2009 – CSS, WordPress, and Type Edition! http://bit.ly/pxEze
94. 30+ Amazing Tutorials for Creating Icons in #Photoshop http://bit.ly/ZBSqf
95. 3 Beautiful #CSS Effects With Tutorials And Source Files By Dragon Labs http://bit.ly/aaAJ6
96. How to Create an Abstract Vector Design in #Illustrator http://bit.ly/vDCVA
97. RT @MRHYPERPCS @adellecharles RT Darren Rowse Reading: 30 Untypical #WordPress Sites – http://bit.ly/xlor9.
98. 25 of the Best Websites for Educational Institutions http://bit.ly/gut6z
99. 8 Layout Solutions To Improve Your Designs http://bit.ly/GouyT
100. RT @graphicidentity @fragments77 @DeliciousHot 70+ High-Quality Free #Fonts for Designers http://tinyurl.com/ofzt7b
101. RT @JamesRivers: Reading: Twitter Tips: How to Catch Up After a Few Days Away http://cli.gs/Typ31p
102. RT @iBlend @noupe: Going Freelance: The Pros and Cons With Top Web Designers http://tinyurl.com/o4756q
103. RT @JorgeMudry 44 Must Learn Web Design Layout Tutorials in #Photoshop http://tinyurl.com/okwrwh (via @dustyedwards)
104. RT @liammckay: Graphic Design Week. Today: Icons Icons Icons! http://bit.ly/uCpL6 Great stuff! (via @cameronolivier)
105. Your Online Footprint and Your #Job Search! Nice post from http://twurl.nl/1xg5q7 (via @Fishdogs @careerrocketeer)
106. Sharpening – Unsharp Mask #photoshop http://bit.ly/vGyrK
107. RT @Go_Media: Create A Vector Art Twitter Bird Character Icon In #Illustrator http://tinyurl.com/ot9pb6 (via @iBlend)
108. 100 Amazing Free #WordPress Themes for 2009 http://bit.ly/188HCP
109. New blog post: Twitter Weekly Updates for 2009-05-17 http://bit.ly/H2Cnl

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.

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

Edit 3/1/10 – Create a Clean and Professional Web Design in Photoshop

Edit 3/1/10 – Create a Professional Web 2.0 Layout – This is a very extensive tutorial, 121 pages.

Edit 3/1/10 – The Ultimate Collection Of Brilliant Web Design Tutorials

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

Most web designers know that cheat sheets are incredibly useful. You can use them for quick reference, easy learning, and more. In this list, we’ve compiled an incredible collection of the 100 best and most useful cheat sheets out there.

Topics include:

• Color
• Adobe
• HTML
• CSS
• Ajax
• PHP
• JavaScript
• MySQL
• Action Script
• Miscellaneous

Check out 100 Terrific Web Design Cheat Sheets that Will Save you Time, Money and Mistakes.

In this massive collection of resources, you’ll find all sorts of resources including: tutorial sites, Photoshop Brushes, patterns, Photoshop Actions, showcases/collections, and much more.

Check out the 70 Excellent Photoshop Resources at Six Revisions.

Adobe Fireworks is getting popular than ever, many web designers find a lot of fun to experiment different techniques and learn how to work with various aspects of Adobe Fireworks to spice up boring pictures and make them into works of arts. So, if you’re interested in learning some new skills, whether you’re a beginner, intermediate or advanced user, these Adobe Fireworks tutorials are for you.

Continue reading 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files