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.

Recently we have added a WordPress unit to the course curriculum. While it’s not a required unit at this time, I think it’s very important for students to learn how to use WordPress and how to manipulate and create themes (design). This post includes excellent articles, themes, and plugins that I have found over the last two weeks (5/27-6/16).

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.

WordPress Resource Roundup

1. RT @wpmix: Antivirus Plugin For #WordPress | Make Money Group http://bit.ly/p9Aye
2. RT @mlane: 10 Ways to Install Accordion Menus in Your #Wordpress Theme – http://bit.ly/3wHUSH
3. #WordPress 2.8 Resources For Developers http://bit.ly/18dvIF
4. RT @wpdimension 45 Best Free #WordPress Themes of All Time http://tinyurl.com/lbcdre
5. RT @wpdimension 45 Best Free #WordPress Themes of All Time http://tinyurl.com/lbcdre
6. Should you use a Mobile #WordPress Plugin? http://bit.ly/QVhp1
7. #Wordpress 2.8 And 10 Things That You Should Know Before/After You Upgrade http://bit.ly/11DmWo
8. 8 Simple #WordPress Developers Tips & Tricks To Improve Your Site Significantly http://bit.ly/ourO2
9. The TOP 6 Premium #WordPress Themes For FREE http://bit.ly/8Jk22
10. Moderate #Wordpress Comments from your Desktop http://bit.ly/wlzyt Adobe Air App
11. RT @redwall_hp @wordpress: #WordPress 2.8 Release Candidate 1 — http://bit.ly/gILqR
12. #Photoshop to #WordPress: A Basic Guide http://bit.ly/JTjkZ
13. 10+ Paramount Creative Appealing Free #WordPress Themes http://bit.ly/SBOPx
14. RT @iamkhayyam: Top 18 most downloaded #WordPress plugins ever http://bit.ly/epU3z #rehash
15. Weblog Tools Collection: Publish Blog Posts In #WordPress From Yahoo Mail http://bit.ly/emGZ6 (via @wplinks)
16. RT @IconicImagery 60+ Awesome #WordPress Tutorials » Themetation http://bit.ly/14HPIt (via @mayhemstudios @wplinks)
17. RT @ManiKarthik: 5 #WordPress Twitter Plugins to help readers tweet your articles http://bit.ly/BMKli (via @tweetmeme)
18. 14 Most Visually Appealing Free #WordPress Themes | Web Design Ledger http://tinyurl.com/oa3svc (via @inspiranation @TM_Technology)
19. RT @TutorialBlog: Choosing a #CMS http://tinyurl.com/rcy8ry #wordpress #joomla #drupal
20. Details on the 10 Most Helpful #WordPress Design Blogs http://bit.ly/l67Hp
21. The #Wordpress Plugins I Use Everyday http://bit.ly/2MgsVZ (via @DesignNewz)
22. RT @smashingmag: 5 Useful #WordPress Functions You Didn’t Know Existed – http://tr.im/nfA1 (via @wpcandy @lingokid)
23. @phaoloo: RT @ManiKarthik: 10 Reasons why you should upgrade to #WordPress 2.8 http://bit.ly/Pxw4J
24. RT @TheWebBlend: 45+ Stunning Tutorials, Inspirations And Resources For Designers for May http://bit.ly/rDWTK
25. 5 Explicit Tutorials on Converting #WordPress to #CMS http://bit.ly/12t1H9
26. #WordPress theming for beginners, an introduction http://bit.ly/9trLD
27. The Ultimate Guide to Setting up #WordPress after an Install – http://tinyurl.com/nk9zx6 (via @TheWebBlend)
28. Companies focus on #CMS implementation – new report http://is.gd/LClS (via @briancray)
29. 10 Easy #Tutorials to create a Mobile version of your blog in minutes! http://bit.ly/IG08q
30. RT @jasonarend #Wordpress #SEO Definitive Guide To Higher Rankings For Your Blog http://is.gd/KUUF (via @hashwordpress)
31. RT @iamkhayyam Free #Wordpress Theme Design Tutorial with Source Materials http://bit.ly/qqKtA (via @hashwordpress)
32. How To: #WordPress Tag Archive http://bit.ly/15DTVp
33. Five Ad Manager Plugins for #WordPress http://bit.ly/Lze3x
34. Creating photoblogs with #WordPress http://bit.ly/13OJSs (via @ryanimel)
35. RT @WonderWy: 25 Ways to Spice Up Blog #Photos http://bit.ly/7KCoU #photoshop
36. RT @DesignNewz: 40 Exceptional #CMS Enabling #WordPress Plugins http://bit.ly/146H4d
37. 25+ Aberrant #WordPress Sites http://bit.ly/fvZ0e

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.

The WordPress unit is almost complete, but I feel that students can start on this unit now.  We will be using a combination of books including WordPress for Dummies to cover the core fundamentals of WordPress and WordPress Theme Design to learn how to create custom themes/styles for your blog.

Both of these applications can be installed via cPanel/Fantastico. There is no need to download either software package. Installation directions are included on each assignment sheet.  Each application should be installed in a subdirectory of public_html – Fantastico will automatically create the directory for you.

I would recommend that you complete the WordPress unit first.

There are numerous free blog hosts, if the three that we check out in class don’t meet your needs try some of the free blog hosts found in the article 40+ Free Blog Hosts.

Don’t: Overlook the Power of the Web to Sell Yourself

There are numerous options available on the Internet for promoting yourself to employers. Don’t overlook blogs and your own resume web site as unique ways to reach out to potential employers.

“Every job seeker should have a blog and a keyword-rich resume on their own web site,” says Montford. “You can blog about your industry and comment on articles and issues related to your field. Just remember to keep your comments positive.”

Continue reading this article at Yahoo Hot Jobs

One of the things that we will work on while we are temporarily conducting class in Antioch is to create a blog or Web log. If you would like to start exploring creating a free blog now, visit http://wordpress.com/.

I think that those of us who blog assume that everyone who surfs the Internet knows exactly what a blog is. I mean everyone has heard of MySpace, right? Haven’t you heard people say “I’m going to post that on my blog” at dinner parties? As a computer teacher I try to avoid using too much computer jargon when new students start my program, but as a blogger I sometimes forget that “blog” is a relatively new term to many. I realize this when I mention my various educational blogs to new students and they ask the question “exactly what is a blog?”

A blog or weblog is essentially a journal or diary that is available on the web. Updating or writing in a web journal is called “blogging”. Blogs have become very popular over the last several years; it’s difficult to tell today exactly how many blogs are currently “active”, but in 2004, Pew International stated that eight million Americans had created blogs. To learn more about the blog craze you may want to ready this Time article 10 Things We Learned About Blogs. Blogs have transformed over the last couple of years; while you will still find blogs that discuss a person’s daily events and/or innermost feelings, you will now find technology blogs, photo blogs, recipe blogs, music blogs, and even corporate blogs. This site is a blog.

How can you tell when a site is a blog?

Here are some common characteristics of a blog:

1. The content is posted in reverse chronological order (similar to a resume) with the most recent post at the top of the page.
2. Posts are separated by the post title, post author, and post date; each of these items is typically a link to further information or the full post content.
3. A blog allows visitors to make comments, so you will usually see a link for comments with each post.
4. Frequently bloggers use sidebars on their sites; these sidebars (site menus) include links to monthly and category archives, calendars, search boxes, subscription information, recent comments and posts, and site meta information. If you look to the right you will see many of these items.

If you take a look at my other blogs you will see the same characteristics at each site: photography blog, recipe blog, and the hermit crab blog.

So, what’s so good about blogs?

Once a blog has been setup it is very easy to update on a daily or regular basis because it requires little technical knowledge. Simply type the text that you want to add to your blog into a web form and click a button to post your content. That’s it, your new content is published immediately to the web. You don’t have to open a text editor, Dreamweaver, or any other HTML editor to update your content on the web and you don’t have to FTP. For the most part you really don’t have to know any HTML or XHTML code to have a blog. There is a screen capture to the right of the interface that I use to update this blog. That being said, most blogs are fully customizable; you can edit the PHP, the CSS, and the XHTML to suit your needs. You can be as geeky as you want to be with a blog.

How do I get a blog?

There are many blog publishing platforms available. Some are hosted on third party web sites like Blogger, TypePad, MySpace, SquareSpace, LiveJournal, and BlogEasy. The benefit of these hosted blogs is that setup is very easy; it usually only requires the user to complete a web form. Maintenance is also simple; a few mouse clicks and you can change the look of your entire blog. The possible downside of these blogging platforms is that their features may be limited and the blog is not usually hosted on your own domain. If you’re looking for really simple and free, this may be the option for you.

More robust publishing platforms require the installation of files on your web host. These publishing systems include: b2, Movable Type, Greymatter, and WordPress. For these programs your web host must have PHP/MySQL and possibly CGI capabilities. You will need to have some experience with HTML, FTP, CSS, and PHP. Personally, I prefer WordPress; the community support is wonderful, the interface is easy to use, and the installation is simple compared to some of the other platforms.

Fortunately, you can easily install WordPress and other blogging platforms with your robinshosting.com account. If you haven’t already signed up for a free robinshosting.com ’student’ account and you’re in my class, signup today. Using CPanel, you can access the Fantastico auto installer and install WordPress with just a few clicks of your mouse. I have created a Flash movie tutorial for installing WordPress that you can review to create your own WordPress blog today.

If you’re not into Flash movies, here are the simple steps:

1. Open CPanel – If you are a student in my class the CPanel address is http://www.robinshosting.com/cpanel. You will need your account username and password to access this page. If you haven’t signed up for an account, visit http://www.robinshosting.com and sign up for the “student” hosting account.
2. Click the Fantastico icon towards the bottom of the page.
3. You should see a menu on the left-hand side of the page. Under the Blog category there is a link for WordPress, click the WordPress link.
4. A WordPress description should appear, click the New Installation link.
5. At the install WordPress screen, select the domain that you want to install to and type the name of the folder that you want to install to (this folder will become a part of your blog address, so choose wisely). Type the desired admin username and password. Type the desired admin nickname (this will appear when you post to your blog) and enter your email address, the site name and a brief site description. Under the email account information you should only have to enter the password.
6. Click Install WordPress. When prompted click Finish Installation.
7. Congrats! You’ve successfully installed WordPress. Be sure to bookmark the blog address, the admin access page and don’t forget your username and password!

If you do not have access to CPanel and Fantastico with your host and you need help setting up WordPress review How-to Setup a WordPress Blog with f2o.org Tutorial – Updated for WordPress 1.5

Part II of this series will discuss how to setup and post to your new WordPress blog. Part III will cover styling your blog using WordPress themes and customizing WordPress themes. Part IV will discuss WordPress plugins that make blogging easier.

There have been several other articles posted on this subject recently. Check the following for more information:

20 Answers to the Question What Does it Take to Blog

HOW TO: Start Blogging

Designing a Rainbow – Sexy Hot Colors – Lorelle on WordPress has a wonderful roundup of color resources on her blog today. Yummy!

graphicPUSH offers a Blog Icon Pack, a set of free icons for your blog or web site. Take a look at the graphicPush archives, there are a lot of interesting and informative articles.

WordPress.com is now offering free, WordPress based, blog hosting accounts to all; you no longer need an invitation to sign-up. Speaking of WordPress, WordPress 2.0 Beta 1 is now available.

Brothercake has a free CSS based simple website menu that you can download, customize and use on your sites. This zip package includes the necessary CSS, JavaScript, and XHTML to create both horizontal and vertical list menus.

In addition to validating HTML, XHTML, and CSS the W3C now offers an RSS/Atom Feed Validator.

php-editors has a list of PHP editors which includes licensing information, platform specs, and user rankings.

• Important Notes for Students Starting the XHTML Book
• HTML Character Entities

Now for some goodies from around the web:

Tracy shared a great resource with me for used books, Abebooks. The prices are terrific and you can get many of the textbooks we use in class at this site. Thanks, Tracy!

Brainbench is offering another couple of days of free testing. At Brainbench you can take a variety of technical exams to see how you’re doing with your progress in class.

I know that some of you have started or plan to start your own small business. About.com lists the Top 10 Most Practical Blogs for Entrepreneurs

Web Creme showcases some outstanding and unique web sites. Definitely worth taking a look at some of the sites for inspiration.

And of course a few interesting CSS Articles:

Image floats, without the text wrap! – a technique for using floats and keeping the content from floating around the image or div.

CSS is not hard to learn – if you recognise it for what it is – a great article worth a read for anyone working with CSS.

The CSS Zen Garden has some new designs including one by Mani Sheriar, a former student! You can visit Mani’s blog here http://www.manisheriar.com/blog/.

For you Scott Kelby fans there is now PhotoshopTV! You can now view Photoshop tutorials on your computer or iPod at http://www.photoshopguys.com/.

I came across a couple of tips for speeding up Firefox:

Firefox Speed Tip
Speeding Up Firefox the Right Way

Do you want to share photos online, edit photos, create calendars, collaborate online, etc.? I want to is a page of handy web site utilities.