meet·up \mēt-əp\ noun
A meeting, especially a regular meeting of people who share a particular interest and have connected with each other through a social-networking Web site: a meetup for new moms in the neighborhood; a meetup to plan the trip; a meetup for WordPress users.¹

So what is a WordPress Meetup? Basically, it’s people in a community getting together — meeting up — who share an interest in WordPress, whether they be bloggers, business users, developers, consultants, or any other category of person able to say, “I use WordPress in some way and I like it, and I want to meet other people who can say the same.” Meetups come in different shapes and sizes, but they all carry the benefit of connecting you with potential collaborators and friends, and helping you learn more about what you can do with WordPress. Here are some of the common types of WordPress meetups:

• Hang out and work on your WordPress sites together
• Social/happy hour type gatherings
• Mini-lectures/presentations
• Developer hacking meetups
• Show & tell of how group members are using WordPress
• Formal instruction on how to use WordPress
• Lecture series (possibly with visiting speakers)
• Genius bar/help desk

There’s no prescribed format, as each local group can decide for itself what they want to do. Some groups mix it up from month to month, while others have multiple events each month to satisfy the needs of their community.

The tough part? Running a popular group takes time and money. Just as we worked last year to remove the financial burden for WordCamp organizers and provide logistical support so they could focus more on their event content and experience, we want to start extending that kind of support to meetup groups as well. We don’t want it to cost anything for someone to run a WordPress meetup, or to attend one — building local communities should be as free as WordPress itself!

Since there are so many more meetups than there are WordCamps, we’re going to start with the cost that is the same for every group: meetup.com organizer dues. We’re setting up an official WordPress account on Meetup.com right now, and over the next couple of weeks will be working with existing meetup group organizers, people who want to start a new meetup group, and the helpful folks at Meetup.com to put this program in place. WordPress meetup groups that choose to have their group become part of the WordPress account will no longer pay organizer dues for that group, as the WordPress Foundation will be footing the bill.

This is exciting for several reasons. First, it means local organizers who are giving something back to the project by way of their time won’t also have shell out $12-19/month for the privilege. That alone is a big step. Second, it will open the door to more events and leaders within a community, since leadership and event planning won’t need to be tied to “owning” the meetup group. Third, more active meetup groups means more WordCamps, yay!

In addition to the financial aspects, we’ll be working on ways to improve social recognition of meetup activity by incorporating feeds from the official meetup groups into the WordPress.org site, and including meetup group participation in the activity stream on your WordPress.org profile.² I’m also hoping we can do something around providing video equipment to meetup groups (like we already do for WordCamps) to record presentations and tutorials that can be posted to WordPress.tv, helping meetup groups offer WordPress classes in their community, and getting involved with mentoring WordPress clubs at local schools and universities. Oh, and we’ll send out some WordPress buttons and stickers to the groups that join in, because everyone loves buttons and stickers.

We’re also putting together some cool resources for people who want to start a new meetup group. There will be a field guide to getting started and some supplies to help you get your group going, and a forum for organizers to talk to and learn from each other.

Over time, we’ll be talking to organizers and looking at what other expenses we can absorb and what other support we can provide to local groups. For now, we’re starting with the organizer dues. If you currently run a WordPress meetup group (whether you are using Meetup.com or not) or would like to start a WordPress meetup group in your area, please fill out our WordPress Meetup Groups survey. Filling in the survey doesn’t obligate you to join the official group, it just gives us a starting point to a) find out what groups are around/interested, and b) get some information on existing groups and their expenses and needs. Meetup.com will contact the group organizers who’ve said they’d like to join the new program, and will walk them through the logistics of the change and answer questions before helping them to opt-in officially.

So, if you currently run a WordPress meetup group, or you would like to start one, please  fill out our WordPress Meetup Groups survey. I can’t wait to see more meetups!

1 – Adapted from “meetup” definition at dictionary.com.
2 – Didn’t know about profiles? Check out http://profiles.wordpress.org/users/yourwordpressdotorgusernamehere (put in the username you use in the WordPress.org forums) to see yours!

On January 18, 2012 many sites around the web — from small personal blogs to internet institutions like Mozilla, Wikipedia, reddit, and I Can Has Cheezburger? – will be going dark in protest and to drive their visitors to sites like americancensorship.org to take action and help fight the passage of the Protect IP Act. So will WordPress.org.

If you want to join the protest by blacking out your WordPress site or applying a ribbon, there is now a variety of blackout plugins in the WordPress.org plugins directory. While joining the protest in this manner is laudable, please don’t forget to also make those phone calls to U.S. Senators — they’re the ones with the voting power.

• Get a protest plugin
• Take action at americancensorship.org

Normally we stay away from from politics here at the official WordPress project — having users from all over the globe that span the political spectrum is evidence that we are doing our job and democratizing publishing, and we don’t want to alienate any of our users no matter how much some of us may disagree with some of them personally. Today, I’m breaking our no-politics rule, because there’s something going on in U.S. politics right now that we need to make sure you know about and understand, because it affects us all.

Using WordPress to blog, to publish, to communicate things online that once upon a time would have been relegated to an unread private journal (or simply remained unspoken, uncreated, unshared) makes you a part of one of the biggest changes in modern history: the democratization of publishing and the independent web. Every time you click Publish, you are a part of that change, whether you are posting canny political insight or a cat that makes you LOL. How would you feel if the web stopped being so free and independent? I’m concerned freaked right the heck out about the bills that threaten to do this, and as a participant in one of the biggest changes in modern history, you should be, too.

You may have heard people talking/blogging/twittering about SOPA — the Stop Online Piracy Act. The recent SOPA-related boycott of GoDaddy was all over the news, with many people expressing their outrage over the possibilities of SOPA, but when I ask people about SOPA and its sister bill in the Senate, PIPA (Protect IP Act), many don’t really know what the bills propose, or what we stand to lose. If you are not freaked out by SOPA/PIPA, please: for the next four minutes, instead of checking Facebook statuses, seeing who mentioned you on Twitter, or watching the latest episode of Sherlock*, watch this video (by Fight for the Future).

Some thoughts:

• In the U.S. our legal system maintains that the burden of proof is on the accuser, and that people are innocent until proven guilty. This tenet seems to be on the chopping block when it comes to the web if these bills pass, as companies could shut down sites based on accusation alone.
• Laws are not like lines of PHP; they are not easily reverted if someone wakes up and realizes there is a better way to do things. We should not be so quick to codify something this far-reaching.
• The people writing these laws are not the people writing the independent web, and they are not out to protect it. We have to stand up for it ourselves.

Blogging is a form of activism. You can be an agent of change. Some people will tell you that taking action is useless, that online petitions, phone calls to representatives, and other actions won’t change a single mind, especially one that’s been convinced of something by lobbyist dollars. To those people, I repeat the words of Margaret Mead:

Never doubt that a small group of thoughtful, committed citizens can change the world. Indeed, it is the only thing that ever has.

We are not a small group. More than 60 million people use WordPress — it’s said to power about 15% of the web. We can make an impact, and you can be an agent of change. Go to Stop American Censorship for more information and a bunch of ways you can take action quickly, easily, and painlessly. The Senate votes in two weeks, and we need to help at least 41 more senators see reason before then. Please. Make your voice heard.

*Yes, the latest episode of Sherlock is good. Stephen Moffatt + Russell Tovey = always good

Download 3.3.1 or visit Dashboard → Updates in your site admin.

WordPress has had over 65 million downloads since version 3.0 was released, and in this third major iteration we’ve added significant polish around the new user experience, navigation, uploading, and imports. Check out this short video that summarizes the things we think you’ll find are the cat’s pajamas:

For Users

Experienced users will appreciate the new drag-and-drop uploader, hover menus for the navigation, the new toolbar, improved co-editing support, and the new Tumblr importer. We’ve also been thinking a ton about what the WordPress experience is like for people completely new to the software. Version 3.3 has significant improvements there with pointer tips for new features included in each update, a friendly welcome message for first-time users, and revamped help tabs throughout the interface. Finally we’ve improved the dashboard experience on the iPad and other tablets with better touch support.

For Developers

There is a ton of candy for developers as well. I’d recommend starting your exploration with the new editor API, new jQuery version, better ways to hook into the help screens, more performant post-slug-only permalinks, and of course the entire list of improvements on the Codex and in Trac.

Roll the Credits

The Credits tab on the new About WordPress screen in the WordPress dashboard provides recognition for contributors to each release, but we like to thank them here as well.

Aaron D. Campbell, Aaron Jorbin, Adam Backstrom, Adam Harley, Alex Concha, Alex King, Alex Mills (Viper007Bond), amereservant, ampt, Andrei Freeman, Andre Renaut, andrewfrazier, Andrew Nacin, Andrew Ozz, Andrew Ryno, Andy Skelton, Anthony Atkinson, Austin Matzko, Bartosz Kaszubowski, Benjamin J. Balter, Brandon Dove, carlospaulino, Caspie, cebradesign, Chelsea Otakan, Chip Bennett, Chris Jean, Coen Jacobs, Curtiss Grymala, Daniel Bachhuber, Daryl Koopersmith, Daryl L. L. Houston, David, David Cowgill, David Gwyer, Da^MsT, deltafactory, demetris, Derek Herman, Devin Reams, Digital Raindrops, Dion Hulse (@dd32), Dominik Schilling (ocean90), Doug Provencio, dragoonis, DrewAPicture, Dylan Kuhn, eduplessis, Eightamrock, eko-fr, Elpie, elyobo, Empireoflight, Erick Hitter, Eric Mann, Evan Anderson, Evan Solomon, fonglh, garyc40, Gary Jones, Gaurav Aggarwal, George Stephanis, goldenapples, goto10, hakre, Helen Hou-Sandi, Ian Stewart, Ipstenu, Jackson, Jacob Gillespie, Jake Goldman, James Collins, Jane Wells, jeremyclarke, Jesper Johansen (Jayjdk), jgadbois, Jick, Joe Hoyle, John Blackbourn, John Hawkins, John James Jacoby, JohnONolan, John P. Bloch, Jon Cave, Jorge Bernal, Joseph Scott, jtclarke, Jurica Zuanovic, Justin Givens, Justin Sainton, Kailey Lampert (trepmal), kevinB, kitchin, Konstantin Kovshenin, Kuraishi, Kurt Payne, Lance Willett, Latz, linuxologos, Lloyd Budd, Luc De Brouwer, lukeschlather, Mako, Mantas Malcius, MarcusPope, mark-k, Mark Jaquith, Mark McWilliams, Marko Heijnen, Martin Lormes, masonjames, Matias Ventura, Matt Mullenweg, Matt Thomas, Matt Wiebe, MattyRob, Mert Yazicioglu, Michael Adams (mdawaffe), Michael Fields, Michal “Mau” Pliska, Mike Bijon, Mike Schroder, Milan Dinic, mitchoyoshitaka, Mohammad Jangda, Morten Hauan, Mr Papa, mrtorrent, Naoko McCracken, natebedortha, Nikolay Bachiyski, olivM, olleicua, Otto, pagesimplify, paulhastings0, pavelevap, pete.mall, Peter Westwood, peterwilsoncc, ppaire, Ptah Dunbar, r-a-y, Rami Y, Rasheed Bydousi, Robert Chapin (miqrogroove), Ron Rennick, Ross Hanney, ruslany, Ryan Boren, ryanhellyer, Ryan Imel, Safirul Alredha, Samir Shah, Sam Margulies, saracannon, Scott Basgaard, Scott Bressler, Scott Cariss, scottconnerly, Scott Reilly, Scott Taylor, scribu, Sergey Biryukov, Sheri Bigelow, Simon Wheatley, sirzooro, Stephanie Leary, tech163, TheDeadMedic, Tim Moore, Tom Auger, Travis Ballard, Ulrich Sossou, vnsavage, wpweaver, WraithKenny, Yoav Farhi, and Ze Fontainhas.

As well, we’d like to give a shout out to these users who have been particularly active on the support forums since the release of 3.2:

alchymyth, Andrea_r, ClaytonJames, cubecolour, Eran Miller, esmi, Frederick Townes, govpatel, Ipstenu, keesiemeijer, kmessinger, Marcus, Otto, peredur, Rev. Voodoo, Samuel B, Tobias, vtxyzzy, and zoonini.

Our goal is to release version 3.3 early next week, so plugin and theme authors, this is your last pre-release chance to  test your plugins and themes  to find any compatibility issues before the final release. We’ve published a number of posts on the development blog that explain important things you need to know as you prepare for WordPress 3.3. Please review this information immediately if you have not done so already.

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. Or, if you’re comfortable writing a reproducible bug report, file one on WordPress Trac. Known issues that crop up will be listed here, but let’s all keep our fingers crossed for a quiet Sunday so we can get these new features into your hands early next week!

To test WordPress 3.3, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

Our goal is to release version 3.3 early next week, so plugin and theme authors, this is your last pre-release chance to  test your plugins and themes  to find any compatibility issues before the final release. We’ve published a number of posts on the development blog that explain important things you need to know as you prepare for WordPress 3.3. Please review this information immediately if you have not done so already.

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. Or, if you’re comfortable writing a reproducible bug report, file one on WordPress Trac. Known issues that crop up will be listed here, but let’s all keep our fingers crossed for a quiet Sunday so we can get these new features into your hands early next week!

To test WordPress 3.3, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

Our goal is to release version 3.3 early next week, so plugin and theme authors, this is your last pre-release chance to  test your plugins and themes  to find any compatibility issues before the final release. We’ve published a number of posts on the development blog that explain important things you need to know as you prepare for WordPress 3.3. Please review this information immediately if you have not done so already.

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. Or, if you’re comfortable writing a reproducible bug report, file one on WordPress Trac. Known issues that crop up will be listed here, but let’s all keep our fingers crossed for a quiet Sunday so we can get these new features into your hands early next week!

To test WordPress 3.3, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

Last year we wanted to do a video town hall, but ran into technical and scheduling difficulties. This year we’re planning ahead, and will definitely make it happen. We’re currently taking questions, and will record a series of town hall-style videos where we answer your questions. Ask about the roadmap, code, community, contributing, WordCamps, meetups, themes, plugins, features, you name it. No topic (as long as it is about WordPress) is off limits, and we’ll do our best to answer as many questions as we can while we are together. The videos will be posted to this blog and archived at WordPress.tv.

Last year the people who were in attendance also posted pictures and updates to Twitter using the #wptybee tag. We’ll use the same tag this year, so if you’re interested in following along, add it to your Twitter client as a search.

What do you want to know from us? Ask away!

Last year we wanted to do a video town hall, but ran into technical and scheduling difficulties. This year we’re planning ahead, and will definitely make it happen. We’re currently taking questions, and will record a series of town hall-style videos where we answer your questions. Ask about the roadmap, code, community, contributing, WordCamps, meetups, themes, plugins, features, you name it. No topic (as long as it is about WordPress) is off limits, and we’ll do our best to answer as many questions as we can while we are together. The videos will be posted to this blog and archived at WordPress.tv.

Last year the people who were in attendance also posted pictures and updates to Twitter using the #wptybee tag. We’ll use the same tag this year, so if you’re interested in following along, add it to your Twitter client as a search.

What do you want to know from us? Ask away!

Last year we wanted to do a video town hall, but ran into technical and scheduling difficulties. This year we’re planning ahead, and will definitely make it happen. We’re currently taking questions, and will record a series of town hall-style videos where we answer your questions. Ask about the roadmap, code, community, contributing, WordCamps, meetups, themes, plugins, features, you name it. No topic (as long as it is about WordPress) is off limits, and we’ll do our best to answer as many questions as we can while we are together. The videos will be posted to this blog and archived at WordPress.tv.

Last year the people who were in attendance also posted pictures and updates to Twitter using the #wptybee tag. We’ll use the same tag this year, so if you’re interested in following along, add it to your Twitter client as a search.

What do you want to know from us? Ask away!

As the first release candidate was well-received, we think we’re really close to a final release. Primarily, we’ve ensured that new toolbar (the admin bar in 3.2) has a consistent appearance across all browsers, and the API for developers is now final. You can check our bug tracker for the complete list of changes.

Plugin and theme authors, please test your plugins and themes now, so that if there is a compatibility issue, we can figure it out before the final release. On our development blog, we’ve published a number of posts that explain important things you need to know as you prepare for WordPress 3.3.

If you haven’t tested WordPress 3.3 yet, now is the time — please though, not on your live site unless you’re adventurous. Once you install RC2, you can visit About WordPress page (hover over the WordPress logo in the top left) to see an overview of what’s to come in WordPress 3.3 (and what to test, of course).

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. Or, if you’re comfortable writing a reproducible bug report, file one on WordPress Trac. Known issues that crop up will be listed here.

Enjoy!

To test WordPress 3.3, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

Sometimes time slows down
between releases – like now
This is RC2

Stayed up late tonight,
Hammering toward RC1.
Now with more icons!

Download WordPress 3.3 Release Candidate 1.

With all our major tickets closed, we are very close to a release candidate. In Beta 4 we’ve fixed a bunch of bugs, cleaned up the UI, added real text in some of the screens that still had placeholder text in Beta 3 (post-update screen, the Dashboard welcome area, new feature pointers), and generally tightened things up. We updated to jQuery 1.7.1 and addressed a LOT of bugs.

If you are a plugin or theme developer (or distributor), please test against Beta 4 to ensure there are no issues.

If you find any problems, please report them as usual. Many thanks!

Thought 3 was the last?
Ha ha! Beta 4 is here –
Better get testing!

Download WordPress 3.3 Beta 4

Imagine being able to change themes and modify widgets as needed, and if you decided to go back to your old theme, it would return your widgets to how they were the last time you had that theme activated.  Sounds good, yeah? The problem we’re facing is deciding how long to save the old widget configuration, since there are so many potential workflows. If you changed From Theme A to Theme B and added more widgets over the next few weeks, if you switched back to Theme A after a month, would you still expect it to go back to the widgets from a month ago? At what point does it go from handy timesaver to unexpected widget mangler?  What do you think?

Whether serving in the military, living in an area of unrest or attack, having friends or family in the fray, or just being human enough to think war sucks (there’s really no gentler way to say that, is there?), war impacts most people in the world today.

The mission of WordPress is to democratize publishing. Sometimes we’re fortunate enough for that to mean providing a platform for communication that helps people work toward peace in their communities and around the world. Sometimes it means providing a platform for keeping people informed and aware of the other things that are happening around the world, including the horror of wars and revolutions.

At WordCamp San Francisco in August, one of the most popular and well-respected sessions was led by Teru Kuwayama of Basetrack.org. On this day of remembrance, I thought it would be good to share the video of his presentation. Not only is it a very cool example of how WordPress can be used in unexpected ways (this is not your father’s Oldsmobile usual blog), it’s a reminder of how much work still needs to be done to move from war to peace. So here is Taking WordPress to War: Basetrack.org. Peace out, yo.

As always, plugin and theme authors, PLEASE test your code against the beta so you can catch any incompatibilities now rather than after your users update their WordPress installation and find bugs for you. This time we really mean it, especially if your plugin uses jQuery. We’ve now updated to jQuery 1.7 in core, so please please pretty please check your plugins and themes against beta 3.

These silly haikus –
With so many releases,
I run out of words.

Download WordPress 3.3 Beta 3 now.

• Updated the Blue theme
• Fixed IE7 and RTL support
• Improved flyout menu styling and fixed several glitches
• Finished the Pointers implementation
• Landed the dashboard Welcome box for new installs
• Improved contextual help styling
• Tweaked the admin bar a little more
• Fixed a bunch of bugs

Consult the full change log  for details, and see the Beta 1 announcement for information on how to help test Beta 2.

Welcome for the new –
3.3 at beta 2.
(IE7, woo!)

Download 3.3 Beta 2.

As always, this is software still in development and we don’t recommend that you run it on a production site — set up a test site just to play with the new version. If you break it (find a bug), please report it, and if you’re a developer, try to help us fix it.

If all goes well, we hope to release WordPress 3.3 by the end of November. The more help we get with testing and fixing bugs, the sooner we will be able to release the final version. If you want to be a beta tester, you should check out the Codex article on how to report bugs.

Here’s some of what’s new:

• Media uploader
• Improved admin bar
• Fly out admin menus

Remember, if you find something you think is a bug, report it! You can bring it up in the alpha/beta forum, you can email it to the wp-testers list, or if you’ve confirmed that other people are experiencing the same bug, you can report it on the WordPress Core Trac. (We recommend starting in the forum or on the mailing list.)

Theme and plugin authors, if you haven’t been following the 3.3 development cycle, please start now so that you can update your themes and plugins to be compatible with the newest version of WordPress.

Download WordPress 3.3 Beta 1

And now, haiku.

Features almost done…

3.3 at Beta 1.

Test it now — have fun!

3.3 Hackathon

WordPress 3.3 is about to hit feature freeze. This means it’s the last chance to squeeze in features that haven’t quite been finished, and enhancements and fixes that no one has had time to address yet. Around this time, there are often dozens of tickets that have patches, but the patches have not been tested enough to be committed to core. Then the contributors who worked hard on the patches are disappointed that their code doesn’t make it into the current release. You can help us prevent this!

This weekend, we’ll be running a has-patch needs-testing marathon for the 3.3 milestone. Basically, we’re looking for people who can help test patches and/or refresh patches that need updating. Lead developers and core contributors will be hanging around in the #wordpress-dev channel on irc.freenode.net to answer questions as needed, and will be committing patches as they get enough verification. As you test the patches, report your findings on the trac tickets in question. If all developers who make a living working with WordPress helped out for even an hour or two this weekend, we could clear the 200 tickets or so that are in this situation. To make it fun, why not get together with other WordPress devs and have an in-person hackathon meetup?

WordCamp Portland

At WordCamp Portland this weekend, some of the WordPress core team will be in attendance, including me, Nacin, and Koop. In addition to giving presentations and participating in the unconference sessions, we’ll be involved with a couple of other cool things at WCPDX:

• Hacker Room. There will be room set aside for people to work on core bugs and features slated for the 3.3 release. Hopefully PDX developers will hang out in here some of the time helping with the marathon.
• Welcome Free Software Projects! Normally WordCamps are 100% focused on WordPress, but in light of Software Freedom Day, the WC PDX organizers, in conjunction with the WordPress Foundation, would like to extend an invitation to all free software projects to participate in WordCamp Portland. There are a couple of rooms set aside that can be used for unconference sessions and/or hacker rooms for other projects. It would be great to have local representatives from a bunch of projects there — almost a micro version of OS Bridge or OSCON — to maximize the free software love and cross-pollinate ideas. Developers from other projects are also welcome in the WP hackathon room if they’d like to pitch in. Saturday will also feature the Software Freedom Day Happy Hour at the end of sessions. For more information or to get your project involved, contact the event organizers via the WordCamp Portland website or email support at wordcamp dot org.
• Usability Testing of 3.3 Alpha. As mentioned, we’re about to hit freeze, so we’ll be giving WordCamp Portland attendees a sneak peek at 3.3, seeing how they adjust to the new features, and getting feedback to help us with our last round of fixes before we get to Beta. There will be a signup sheet to participate.

So, if you live it the Portland/Seattle area and haven’t already bought a ticket to attend WordCamp Portland, hurry up, as it’s going to be a great celebration of Software Freedom Day and WordPress.

Is there a WordCamp coming up near you? Let’s find out!

Sep 15: WordCamp Cape Town Cape Town, South Africa

Sep 16-18: WordCamp Albuquerque Albuquerque, NM

Sep 17-18: WordCamp Portland Portland, OR

Sep 24: WordCamp Lisboa Lisboa, Portugal

Sep 24: WordCamp Germany Koln, Germany

Sep 25: WordCamp Sofia Sofia, Bulgaria

Oct 1: WordCamp Louisville Louisville, Kentucky

Oct 8-9: WordCamp Sevilla Seville, Spain

WordPress-specific Sessions

This list is based on searching for “WordPress” in proposal titles, descriptions, and tags. Clicking the proposal title will take you to that page in the SXSW PanelPicker, where you can vote and comment. Names that are linked go to those people’s WordPress.org profiles.

Blog Wars: Movable Type vs. WordPress Revisited

Mark Jaquith – WordPress Lead Developer
Byrne Reese – Endevver
These days people tend to pit us against Drupal rather than Movable Type, but looking back at the early rivalry and learning from the positive and negative aspects of it would be cool as we position ourselves in competition with new platforms. I like seeing Mark present at conferences, he always prepares well and does a good job. Though I’m guessing these guys will be all friendly and collaborative, I might take a nostalgia hit and imagine them in a fistfight just to liven things up.

Designing WordPress

Jane Wells – WordPress User Experience Lead
Disclosure: This is me! Balancing the desire for truly open and participatory design processes against the often more efficient and consistent results of a more curated design method is something we’ve been working on for the past year or so in WordPress core. I’d use the design process for several recent core features (like the UI refresh and internal linking) to illustrate the issues we’ve faced and the results we’ve achieved.

Open Source Social Networking

John James Jacoby – BuddyPress Lead Developer
J-trip (as John James Jacoby is fondly known by many in the community) is the lead dev for BuddyPress and the new bbPress plugin. He’s proposing a panel discussion among reps from several open source social network platforms. It’s always cool hearing more about BuddyPress, but it would be even cooler to figure out how it fits in with and/or stacks up against other platforms.

Welcome to the Chaos – the Distributed Workplace

Nikolay Bachiyski – WordPress Core Developer, GlotPress Lead Developer
Lori McLeese – Automattic
This one isn’t about WordPress per se, though using WordPress as a communication tool is one of the topics and Automattic is obviously a WordPress-based business. The main reason I think people should vote for this session is because Nikolay, core committing developer for internationalization and lead developer of GlotPress, our translation tool, is an awesome speaker. He is hysterically funny when he presents. I would bet money this presentation will involve a bear.

Deploying WordPress: From Zero to Ninja

Grant Norwood – Michael & Susan Dell Foundation
When Mark Jaquith says a presentation on security and deployment is on his short list, I’m impressed. (He said it in the comments on the proposal.)

Beyond the Theme – Using WordPress as an API

David Tufts – kickpress.org
Obviously a hot topic in the community right now, seems like a no-brainer to choose.

Local Government Online: WordPress Beats Drupal

Jase Wilson – Luminopolis
There was a presentation at WordCamp San Francisco this month on moving a news site from Drupal to WordPress. More and more the question comes up of which tool is best for various situations and requirements. And obviously getting government to use more open source software would be a cost-saver in these tough economic times.

WordPress website built live in 45 minutes

Glenn Todd – Dvize Creative
Live walkthroughs are always fun, and help prove to the uninitiated how easy WordPress can be.

So: go vote on these session proposals and help spread the WordPress love. If you know of any WordPress-related proposals that didn’t come up in my search, let me know in a comment and I’ll update this post. Thanks, and maybe we’ll see you in Austin in March!

Once or twice a month, we revisit some of our readers’ favorite posts from throughout the history of Webdesigntuts+. This tut was first published in December, 2010.

In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.

About the Author

Julian Chaniolleau, also known as Devilcantburn, is a freelance graphic and web designer. He’s also an author at ThemeForest, with templates like 96Display or Stereoline, you can also find more of his work at devilcantburn.com.

This design is a great example of Julian’s unique style: dark, yet sophisticated enough to be used for a business site. You can check out more of Julian’s design at his ThemeForest profile, DevilCantBurn.

Let’s dive right in!

Step 1: Setting the Document

Begin by creating a new document in Photoshop that is 1200px x 1600px. Be sure your resolution is set to 72 pixels/inch and your background is set to white. We need to unlock the background layer so we can add some layer styles, right click the background and select “Layer from Background”. You can then rename the layer back to background..

Fill the background with the color #101010.

Now create the following guides (Menu > View > New guide…) :

• 120px vertical
• 600px vertical
• 1080px vertical

Now you have the borders and middle of the interface’s area.

Step 2: Organize Your Groups…

Organization is really important to my own workflow – so the next step is to start creating our Layer Groups. Starting organized is important for one main reason: most big website projects end with hundreds of layers, so if you don’t start with organization in mind, it’ll be easy to get lost if you don’t take the time to group elements into “folders” and keep everything named properly.

In the Layers panel, click on the icon to create a new folder, double-click on the name of the folder to edit the name. Do the same for all the folders.

The main layer folders that we want are :

• Header
• Slider
• Main
• Footer

Step 3: Create the Header

Select the "header" folder in Layers panel. Then, select the rectangle tool from the Vector Shapes area of the toolbar:

Draw a rectangle. Rename it like "Top bar bg". Do Ctrl+T or Cmd+T (Mac) and set the proprieties to be 1200px wide by 10px tall:

Now let’s add some subtle styling; Double click on the colored thumbnail in the layers panel to set the color to #252525. Double-click on the layer to set the FX-layer like this:

This subtle “inner shadow” will add a border effect to the bottom of this rectangle – this is important to separate it from the rest of the header design.

Step 4: Create the Menu

Create a new folder named “Top Menu” in the HEADER group.

Draw a new rectangle. Rename it like "Top Menu bg". Do Ctrl+T or Apple+T and set the proprieties like the "Top bar bg" but with 90px height and 10px in Y axis. So this rectangle will be just under the "Top nar bg" layer in the Layers panel.

Create the item menu text as you need. I use the font, “Droid Serif”, to create the menu, but you can use anything that you’d like. Position it at 20px from the right guide line.

I put 4 “spaces” (hit the spacebar 4x) between each item and the font-size is 18px.

Step 5: Place the Logo

Create a new folder named “Top Logo” in the HEADER group over all groups. Select it and go to Menu > Files > Import. In the resources folder i have included a sample of logo named “logo_zombie.psd”. Choose it and position it at 130px of the left and 5px of the top.

You can add a new FX style on this logo as you need.

Step 6: Create the Slider

Select the SLIDER group and create a rectangle like the step 3 and set the proprieties with 400px height and 100px in Y axis.

Rename it something like "Gradient" and double-click on the colored thumbnail in the layers panel to set the color to #77b400. Double-click on the layer to set the FX-layer like this:

Gradient Black (#00000) with opacity at 100% to Black with opactity at 0

Now, you should get a design like this :

This strategy of adding a “shadow gradient” instead of using fixed colors is important because it will allow us to easily change the colors later on by adjusting the base-rectangle color.

Next, Create a new folder named “slider_block“. Create a rectangle (with the Vector Tools (U) as always) in this group named “Transparency“.

Position it with those values : Double-click on the layer in layer’s panel to open the FX-Layer options. and set it like this :

Duplicate the “Transparency” layer, remove the FX-layer options and name it “picture area“.
Set the background opactity to 100% and resize it with this values to create the multi-layer effect:

Step 7: Create the Slider Control Elements

Create a new document 100px x 100px. Select the Custom Vector Shape (U) from the tools bar and click-right on the document to open the list of custom vector shapes. To create the arrow, I’ll start with a default arrow shape, and then we’ll customize it:

Create the shape with about a 50px width. Name the layer "Arrow slider". Transform the shape as you need… with the white arrow tool (A) , you can adjust the vector paths to make your own arrow…

Put a FX-Layer on the layer with this settings :

Remove the background of this document and save the document as : ArrowSlider.psd in the PSD folder.

Place this arrow in the "slider_block" group. To do that, Menu > File > Import…
Choose the ArrowSlider.psd and place it at the position you want next to the slider.

Duplicate the arrow layer (Ctrl+J or Cmd+J) to create the left arrow and position it.
Use Menu > Edit > Transform > Rotate on horizontal axis to rotate the arrow in the proper direction.

Step 8: Highlight the Slider

Hide the “slider_block” group.
Create a new blank layer, and use the Circle selection tool (M) to create a circle about 200px.
Fill it in with white color.

Release your selection, and then use Filter > Gaussian Blur and set it at 50px.

Set the layer fusion on “overlay” and move it at the top of the slider.
Duplicate this layer 2 times and position the layers at the bottom the slider area at left and right…

Step 9: Enhance the Slider

Duplicate the “gradient” layer and rename it “dark bar”. Reduce the height to 20px and position it at the bottom ot the “gradient” layer.

Change the color of the layer to Black instead of the gradient color and set the layer background opacity at 60%.
Double-click to open the FX-layer options and create a dropshadow and innershadow like this:

Move the layer at 1px down.
Now you got a nice highlighted line between the slider and the black background.

Step 10: Make the Slider Float!

Open the background.jpg file from the resources folder (from the downloaded files) and go to Menu > Edit > Define pattern…. Then close the file.
Now select the background layer and double-click on it to open the FX-layer options and click on Patterns tab. Here select your new background, just created.

Now get the selection of the Transparency layer (Ctrl + click or Cmd + click on the layer).
Create a new layer named "Shadow" and place it under the "Transparency" layer.
Fill it in black and add a Gaussian Blur on.
Menu > Filters > Blurs > Gaussian Blur… and make it with 20px lenght.
Now transform it to make it like a dropshadow….

Once again, use Menu > Filters > Blurs > Gaussian Blur… but now with 5px length.
Now transform it again to resize it to match the transparency layer….

Keep selected the "Shadow" layer and take the "Transparency" layer’s selection (Ctrl+click or Cmd+click on the layer in layers panel).

Now, invert the selection Ctrl+i or Cmd+i and click on the icon to create an opacity mask on the "Shadow" layer. The shadow is now hidden behind the transparency area.

Step 11: Enhance the Logo

Just before we move on to the main part, we are going to enhance the logo to make it more dynamic.

Create a new blank layer under the logo layer and name it “shadow logo“. Get the selection of the logo layer and fill the “shadow logo” layer in black.

Add a Gaussian Blur on with 1,5px lenght.
Transform it. Ctrl + T or Cmd + T to transform it, move the referer point totally at left and move the right
handle to the bottom for 20px…

Now you got a nice depth shadow effect. You can also add more effect on the logo itself if you want!

Step 12: Define the Columns

Now we’re going to add some additional guides to create the 4 columns that the rest of the content has been designed with…

Create the following guides (Menu > View > New guide…) :

• 355px vertical
• 375px vertical
• 590px vertical
• 610px vertical
• 825px vertical
• 845px vertical

We have now 4 columns of 215px each and 20px between them.

Step 13: Slogan Block

Import the geek_zombie.png from the resources folder and position it at the middle of the first column.

Create a big line of text for the slogan with the text of your choice. I used the font “Droid Serif” at the size of 30px and line-height at 42pt. You can adjust the typography as you wish though

Draw a rectangle under the slogan with 7px of height.

On the black rectangle create the FX-Layer options like this :

You have now a nice bevel (pressed) bar.

Select the 3 layers (Zombie + Slogan + black bar) and do Ctrl + G or Cmd + G to group them. Rename the group “Slogan“. Note how we’re staying organized through the entire process!

Step 14: First Column Block

Take the Text tool and create a title. I’m using 30pt type again – notice how this is the same as the slogan, to help keep the typography similar. This helps to ensure a consistent, professional look across the whole design.

Define a zone of text at around 128px of the title and put some small “filler” text inside it. I’m using 13pt Arial, but you can use what you’d like.

Duplicate the black bar we have created for the slogan in the step before and put it under the text at 20px of the bottom of the text.
Resize it to make it fill the first column.

Create a picture area with the Vector Shape tool (U). 215 x 88px.
Duplicate it, rename it as "Tranparency_1col" and stretch it in height to get a block of 215 x 108px.
Press Ctrl+, or Cmd+, to move the layer down in the Layer panel.

Select the "Transparency" layer and copy the FX-Layer style to put it on the layer just duplicated ("Tranparency_1col").

Now you can put you image over the picture area. Right-click on the image and select "Create clipping mask".

Step 15: Create the Other Columns

You can now duplicate the first column (layer group), and then move it to the second column. Change the content (image/text) as needed.

Do the same for the columns 3 and 4…

Step 16: The Footer

Go to Menu > Image > Canvas size and edit the size of the canvas like this :

Draw a rectangle. Rename it like "Footer bg". Do Ctrl+T or Cmd+T (Mac) and set the proprieties to :

Double click on the colored thumbnail in the layers panel to set the color to #101010. Double-click on the layer to set the FX-layer like this :

Select and duplicate the layers "dark bar" and "Gradient" from the Slider group.

Group the layers and place them under the "footer bg" in the Layers panel.

Move them to the bottom of the document.

Resize them to create the style you want.
In my example, I made the Gradient layer 35px tall and the “Dark bar” layer 8px tall…

Put the logo at the bottom right at 20px of guide right.

Duplicate the top menu items to put them in the footer over the "footer bg" layer.

Create a copyright line in Arial, 11pt, black color.

Duplicate the "footer bg" and resize it in height at 10px.
Move it just over the "footer bg". That create a nice bevel effect for the bottom menu.

Done! Create Your Own Custom Versions!

Conclusion

Thanks for following along! I hope you’re able to use some of the tricks and techniques in this tutorial in some of your own projects. If you remember anything, I hope it’s that staying organized is crucial to creating a well-designed site. These same layer-sets can be used to create the HTML/CSS framework when you begin coding. Thanks again!

We also conducted our first ever user and developer survey, which got over 18,000 responses from all over the world:

We found a few interesting tidbits from the survey responses already, including that 6,800 self-employed respondents were responsible for over 170,000 sites personally, and charged a median hourly rate of $50. In tough economic times, it’s heartening to see Open Source creating so many jobs. (If each site took only 3 hours to make, that’s $29.5M of work at the average hourly rate.)

I talk about this data, and much more, in my State of the Word address which you can watch here:

We know there’s more good stuff hidden in there and we’re open sourcing and releasing the raw information behind it. If you’re a researcher and would like to dig into the anonymized survey data yourself, you can grab it here. (Careful, it’s a 9MB CSV.)

There has never been a better time to be part of the WordPress community, and I want to thank each and every one of you for making it such a wonderful place to be. Now it’s time to get back to work, there’s still 85.3% of the web that needs help.

Speakers include members of the WordPress core development team, leaders of WordPress-based businesses, hobbyists, and everything in between. Take a look at the schedules for Friday, Saturday, and Sunday, and if you see something that sounds interesting (how could you not?), buy a livestream ticket. The stream will start at 16:00 UTC on Friday, August 12.

Viewing Parties

Celebrate your own local WordPress community by calling together some friends and having a livestream viewing party. In the case of regular WordPress meetup groups, if you do a viewing party we will have a process after #WCSF is over whereby attendees will be eligible to buy conference shirts if their meetup group organizer confirms viewing party attendance.

Videos from all the recorded sessions will be posted for free on WordPress.tv within a couple of weeks, but watching the livestream allows you to support WordCamp while providing instant gratification. And let’s face it: the best part is that you’ll know what the heck people are talking about on Twitter using the hashtag #wcsf.

This is about as basic a survey as there is. Tell us the three best WordCamp presentations you saw in the past year or so. For each, give the presenters name, the topic (exact title not necessary) and which WordCamp it was at (important).

Example:

1. Joe Shmoe, Using the Loop, WordCamp Sheboygan 2011
2. Jane Doe, Top 5 WordPress Plugins, WordCamp La Mancha 2010
3. Lee Smith, Your First Core Patch, WordCamp Atlantis 2011

That’s it. We don’t need your name or any info at all, just your three top speaker votes. We’ll take a look at the people with the most votes, and consider them for WCSF if they’re not already in the application pool. Thanks for your help in making this year’s conference better and more WordPressy than ever.

Vote Now!

P.S. Have you bought your tickets yet?

For a full list of fixes, view the changelog the list of tickets. Our release haiku:

JSON, the admin
A little bit tidier
Edge cases covered

Download 3.2.1 or update now from the Dashboard → Updates menu in your site’s admin area.

Before we get to the release, in anticipation of the State of the Word speech at the upcoming WordCamp San Francisco (the annual WordPress conference) we’re doing a survey or census of the WordPress world. If you have a moment, please fill out this survey and we’ll share what we learn by publishing the aggregate results in August.

The focus for this release was making WordPress faster and lighter. The first thing you’ll notice when you log in to 3.2 is a refreshed dashboard design that tightens the typography, design, and code behind the admin. (Rhapsody in Grey?) If you’re starting a new blog, you’ll also appreciate the fully HTML5 new Twenty Eleven theme, fulfilling our plan to replace the default theme every year. Start writing your first post in our redesigned post editor and venture to the full-screen button in the editing toolbar to enter the new distraction-free writing or zen mode, my personal favorite feature of the release. All of the widgets, menus, buttons, and interface elements fade away to allow you to compose and edit your thoughts in a completely clean environment conducive to writing, but when your mouse strays to the top of the screen your most-used shortcuts are right there where you need them. (I like to press F11 to take my browser full-screen, getting rid of even the OS chrome.)

Under the hood there have been a number of improvements, not the least of which is the streamlining enabled by our previously announced plan of retiring support for PHP4, older versions of MySQL, and legacy browsers like IE6, which allows us to take advantage of more features enabled by new technologies. The admin bar has a few more shortcuts to your most commonly-used actions. On the comment moderation screen, the new approve & reply feature speeds up your conversation management. You’ll notice in your first update after 3.2 that we’ll only be updating the files that have changed with each new release instead of every file in your WordPress installation, which makes updates significantly faster on all hosting platforms. There are also some fun new theme features shown off by Twenty Eleven, like the ability to have multiple rotating header images to highlight all of your favorite photos.

There is way more, like our new freedoms and credits screens (linked from your dashboard footer), so for the full story check out the Codex page on 3.2 or the Trac milestone which includes the 400+ tickets closed in this release.

A Community Effort

We now finally have a credits page inside of WordPress itself (though a cool revision is coming in 3.3), but for posterity let’s give a round of applause to these fine folks who contributed to 3.2:

Aaron Brazell, Aaron Campbell, Aaron Jorbin, Adam Harley, Alex Concha, ampt, Andrew Nacin, Andrew Ozz, andrewryno, andy, Austin Matzko, BenChapman, Ben Dunkle, bluntelk, Boone Gorges, Brandon Allen, Brandon Burke, Caspie, cfinke, charlesclarkson, chexee, coffee2code, Cristi Burcă, daniloercoli, Daryl Koopersmith, David Cowgill, David Trower, demetris, Devin Reams, Dion Hulse, dllh, Dominik Schilling, Doug Provencio, dvwallin, Dylan Kuhn, Eric Mann, fabifott, Franklin Tse, Frumph, garyc40, Glenn Ansley, guyn, hakre, hebbet, Helen Hou-Sandi, hew, holizz, Ian Stewart, Jacob Gillespie, Jane Wells, Jayjdk, Jeff Farthing, Joachim Kudish, joelhardi, John Blackbourn, John Ford, John James Jacoby, JohnONolan, Jon Cave, joostdevalk, Jorge Bernal, Joseph Scott, Justin Sternberg, Justin Tadlock, kevinB, Knut Sparhell, kovshenin, Kuraishi, Lance Willett, linuxologos, lloydbudd, Luc De Brouwer, marcis20, Mark Jaquith, Mark McWilliams, Martin Lormes, Matías Ventura, Matt Martz, Matt Thomas, MattyRob, mcepl, mdawaffe, Michael Fields, MichaelH, michaeltyson, Mike Schroder, Milan Dinić, mintindeed, mitchoyoshitaka, Mohammad Jangda, mrroundhill, natecook, nathanrice, Niall Kennedy, Nick Bohle, Nikolay Bachiyski, nuxwin, Otto, pavelevap, pete.mall, Peter Westwood, Prasath Nadarajah, Ptah Dunbar, Rafael Poveda, Rahe, Ramiy, Rasheed Bydousi, Reuben Gunday, Robert Chapin, Ron Rennick, Ross Hanney, Ryan Boren, Ryan Imel, Safirul Alredha, Samir Shah, saracannon, sbressler, Sergey Biryukov, shakenstirred, Sidney Harrell, Simon Prosser, sorich87, szadok, tetele, tigertech, trepmal, Utkarsh Kukreti, valentinas, webduo, Xavier Borderie, Yoav Farhi, Ze Fontainhas, and ziofix.

Bonus: On their WordPress.org profiles over 20,000 people have said they make their living from WordPress. Are you one of them? Don’t forget to take a minute for our survey.

PHP and MySQL

As of 3.2, you’ll need to be running PHP 5.2.4 and MySQL 5.0. As we mentioned almost a year ago when we announced that this change was coming, the percentage of people running older versions of PHP and MySQL is relatively low. With more than 45 million people using WordPress, though, even a small percentage can mean a lot of people! Don’t caught with your pants dashboard down — make sure you’re running compatible versions of PHP and MySQL before you update tomorrow when WordPress 3.2 is released.

Log in to your hosting account, and check to make sure you have at least  PHP 5.2.4 and MySQL 5.0. Most of the major hosts already default to these or newer versions, but there are some exceptions. Check to see which versions you are running, and if you’re still on an older version, it should be as simple as changing a dropdown menu and clicking Save to get up to date.

If you don’t know how to find this information in your hosting account or you don’t even know how to access your hosting control panel because someone else manages that for you, don’t fret. You can find out if you’re ready for 3.2 with the Health Check plugin. In your dashboard, go to Plugins → Add New and search for “health check” (it should be the first result). Install it, activate it, and it will tell you if you need to update anything.

If you need more help, contact your host’s customer service and use this email template to ask them to help you.

Hi there. I host my domain [example.com] with you, and I run WordPress on my site. The minimum requirements are changing to PHP 5.2.4 and MySQL 5.0, and I would appreciate your help in confirming that my site’s setup meets these requirements. If I’m currently running an older version of PHP or MySQL, could you update it for me, or tell me how to do it? Thanks so much!

If your host replies that they can’t update to these versions, it might be time to look for a new host.

IE6 and Outdated Browsers

With 3.2, we’re also dropping support for Internet Explorer 6, a 10-years-old outdated browser that even Microsoft is ready to leave behind. From now on, if you access your WordPress dashboard from an outdated browser, we’ll let you know. Why? Because as web technology improves, so does WordPress, as we build features to take advantage of these improvements. If you’re using an out-of-date browser, chances are you’re missing out.

If your browser is out of date, you’ll see a friendly orangey-yellow box in your dashboard letting you know you a newer version is available (which you can dismiss, of course). If you’re using IE6, though, the box will be red, and your dashboard will not function properly. If you’re stuck on IE6 because the computer you use is maintained by a business, library, school, or the like, and you are not able to download a newer browser, here’s a sample email you can use to ask your boss/administrator/IT guys to update the browser.

Hi there. The computer I use at [where you use the computer] is equipped with an out-of-date web browser. Internet Explorer 6 was created 10 years ago, before modern web standards, and does not support modern web applications. More and more sites and applications are dropping support for IE6, including the new version of WordPress. Even Microsoft, the makers of IE6, are counting down until IE6 goes the way of the dinosaur (see http://www.ie6countdown.com/ for more information). Can you please install an updated version of IE or any modern browser (see http://browsehappy.com for more information) on the available computers? Thank you very much.

Welcome to the future!

This release fixes an issue that could allow a malicious Editor-level user to gain further access to the site. Thanks K. Gudinavicius of SEC Consult for bringing this to our attention. Version 3.1.4 also incorporates several other security fixes and hardening measures thanks to the work of WordPress developers Alexander Concha and Jon Cave of our security team. Consult the change log for more details.

Download WordPress 3.1.4 or update immediately from the Dashboard → Updates menu in your site’s admin area.

WordPress 3.2 Release Candidate 3

This release was about all that stood in the way of a final release of WordPress 3.2. So we’re also announcing the third release candidate for 3.2, which contains all of the fixes in 3.1.4; few minor RTL, JavaScript, and user interface fixes; and ensures graceful failures if 3.2 is run on PHP4. As a reminder, we’ve bumped our minimum requirements for version 3.2 to PHP 5.2.4 and MySQL 5.0.

To test WordPress 3.2, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip). At this stage, plugin authors should be doing final tests to ensure compatibility.

Bonus: For more on what to test and what to do if you find an issue, please read our Beta 1 post.

Welcome to June’s “The Best of ThemeForest” roundup where we take a look at the stuff coming out of one of the world’s most popular premium theme marketplaces. From a marketplace network with 816,570 members and about 4,000 files on ThemeForest alone, I’ll be sorting through this month’s stuff to find my favorite files, check out the featured authors and show off some new developments at one of the world’s most popular premium theme marketplaces.

Featured Author

This month’s featured author is templateup, an author based in New Zealand with thirteen Themeforest items that have helped him rank up 1823 sales and a gold paw. templateup’s main portfolio at ThemeForest consists of a selection of WordPress themes, mainly focused on business and e-commerce – popular trends at ThemeForest. His profile badges also show he’s bought at least fifty items himself and referred some too, so his success might well help pay for yours too!

Featured New Author

IcarusIndustries has only one file available, a $35(+2) WordPress theme. However, in his month on the site, he’s reached 148 sales with a black paw. IcarusIndustries is actually an alias for a guy called Alex, based over here in the good old UK. The Brighton-based designer created Callisto, a well-designed creative theme with a nice large slider and beautiful textured background.

Free File for June

Metrosite is this month’s free file of the month, the one file on ThemeForest you can download without charge for one month only (and as the end of the month is arriving soon, you better be quick!).

Metrosite is an elegant, clean site template, aimed at being used for online products and services. The site template includes a PSD version, and a working contact form as well as documentation regarded as well done by our review team.

Metrosite is the work of Indonez, an Envato Elite author based in Indonesia. The team themselves have sold over $250,000 (up to $1,000,000 in fact, but we can’t be sure since the authors, nor the ThemeForest team release exact data) with 34 themes on ThemeForest. Yes, you should be jealous of their 10,380+ sales!

The Best of ThemeForest…

Every month there are some great themes added to ThemeForest, after passing a stringent review by our review team. Here’s some of my personal favourite, and some of the most popular, added in the last month.

Express Store

Express Store is a premium e-commerce WordPress theme that’s easy to install and flexible enough to customize. The theme is a working example of e-commerce with WordPress, but does not require any type of plugin. All the regular features are there, including some like international tax support, stock inventory manager and coupons. It looks very promising and, even though I don’t run an online store, I’d love to buy this just to try it out!

Romix

Romix is a clean corporate WordPress theme with a large slider at the top for advertising, well, what you have to advertise. By default, the theme is a mix of white and light greys, although similar pastel colors can be applied to get Romix an alternative feel. A pleasing addition is all the shortcodes included, especially a 3, 4 or 5 column pricing table.

Avenue

Avenue is a bold magazine/blog theme for WordPress that can be suitable for most projects. I’m a big fan of bold, “Impact”-style fonts and this theme uses them to create a great effect. Avenue comes with a custom theme options panel, including the ability to swap out to one of the predefined skins or to create your own skin with custom colours. Although I can’t talk about this due to me not owning this theme, the page for it advertises an inbuilt review system, which seems interesting.

Vivid

Vivid is a beautiful email newsletter with three colour schemes for it’s cloud-based design. Vivid is highly flexible and even allows you to swap the layout around to create a preferential campaign. The design is ready for use with MailChimp and Campaign Monitor, if you wish to use it in that way. Layered design files are also included, in PNG and Photoshop formats, for your editing needs.

White Label

Admin templates are rarer in these roundups, but White Label is a great example of one. The dashboard-style interface is a beautiful standard for what admin templates should look and feel like. Surprisingly, but also pleasingly, White Label works fine on both an iPad and an iPhone, which is great for those wanting to manage their site on the go. There’s all sorts of hidden surprises, like the various widgets and the fantastic lightbox gallery.

Clear Theme

Clear Theme has had a pretty epic twenty days, in which it managed to hit over 300 individual sales of the multipurpose WordPress template. As with most themes on ThemeForest, the template is laden with tons of features like some cool jQuery effects, dynamic image resizing for thumbnails… basically the stuff that you don’t care about, but will find useful when the scenario that they fix becomes apparent.

Plus over 3,970 more…

Like every month, we always recommend checking out the wider selection of themes on ThemeForest. Marrying a great review team with stringent quality guidelines, pretty much every file on ThemeForest is kick-ass and you should be sure to check out the wide selection available.

The Month at ThemeForest

Understanding the Reviewing Process

Siddharth published an interesting flow chart on the Envato notes blog, detailing how the review team at ThemeForest review new items submitted to their queue.

The graphic describes the process for a WordPress template but it’s essentially applicable for each and every submission. Pay attention to the little notes on the side since they contain additional details about each section.

AppStorm Launches Mac Freelance App Bundle

Here at the Envato network, there’s been some great bundle offers in the past. But these have generally contained themes or video, or some sort of other marketplace asset. However, the AppStorm team have teamed up with app developers to bring over $330 worth of apps for just $49. At AppStorm, it’s all about apps and I spend countless hours reviewing and writing about them over there. Therefore, you should be sure to check out all the reviews my fellow writers have contributed for the eight apps included in the bundle from big name developers who have contributed apps like 1Password and Billings to the bundle.

Whilst not technically ThemeForest news, i’m sure all the Mac-equipped authors might appreciate some of the content bundled into the low $49 price. Plus, if your an author, you can grab it using your marketplace credit at CodeCanyon.

We’ve handled a number of issues since RC1, including additional Twenty Eleven tweaks, a new theme support option for defaulting to randomized headers, and various RTL fixes.

Plugin and theme authors, please test your plugins and themes now, so that if there is a compatibility issue, we can figure it out before the final release. Users are also encouraged to test things out. If you find problems, let your plugin/theme authors know so they can figure out the cause. If you are testing the release candidate and think you’ve found a bug, there are a few ways to let us know:

• Post it to the Alpha/Beta area in the support forums or wp-testers
• Join the development IRC channel and tell us live at irc.freenode.net #wordpress-dev
• File a bug ticket on the WordPress Trac

To test WordPress 3.2, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

If any known issues crop up, you’ll be able to find them here. If you’d like to know which levers to pull in your testing, check out a list of features in our Beta 1 post.

We’re still investigating what happened, but as a prophylactic measure we’ve decided to force-reset all passwords on WordPress.org. To use the forums, trac, or commit to a plugin or theme, you’ll need to reset your password to a new one. (Same for bbPress.org and BuddyPress.org.)

As a user, make sure to never use the same password for two different services, and we encourage you not to reset your password to be the same as your old one.

Second, if you use AddThis, WPtouch, or W3 Total Cache and there’s a possibility you could have updated in the past day, make sure to visit your updates page and upgrade each to the latest version.

An RC comes after the beta period and before final release. We think we’re done, but with tens of millions of users, a variety of configurations, and thousands of plugins, it’s possible we’ve missed something. So if you haven’t tested WordPress 3.2 yet, now is the time! Please though, not on your live site unless you’re extra adventurous.

Things to keep in mind:

• With more than 350 tickets closed, there are plenty of changes. Plugin and theme authors, please test your plugins and themes now, so that if there is a compatibility issue, we can figure it out before the final release.
• Users are also encouraged to test things out. If you find problems, let your plugin/theme authors know so they can figure out the cause.
• Twenty Eleven isn’t quite at the release candidate stage. Contents may settle.
• If any known issues crop up, you’ll be able to find them here.

If you are testing the release candidate and think you’ve found a bug, there are a few ways to let us know:

• Post it to the Alpha/Beta area in the support forums or wp-testers
• Join the development IRC channel and tell us live at irc.freenode.net #wordpress-dev
• File a bug ticket on the WordPress Trac

To test WordPress 3.2, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

Happy testing!

If you’d like to know which levers to pull in your testing, check out a list of features in our Beta 1 post.

Advertise here

Ever wondered what it would be like to sell your own web design templates or WordPress themes? Today we’re going to take a look at the “product side” of the web design industry using ThemeForest, our own theme marketplace at Envato, as an example. These tips are specifically for web designers who are trying to sell their designs as products, but these are also ideas that apply to pretty much anyone trying to promote their portfolios or get more exposure!

Introduction

ThemeForest has a reputation for high quality themes and templates, and this is not just by chance. ThemeForest maintains very stringent quality guidelines during it’s review process in order to ensure that the themes retailed there are only of the highest quality. Developing an awesome, high-performance theme is not luck, but the product of some hard work, time and effort.

It’s important that your theme comes off as something the buyer can actually use, with as few design errors as possible. In today’s article, we’re going to run over some tips for creating better quality, and potentially higher selling, themes on ThemeForest. Even if you aren’t designing for that specific marketplace – or any marketplace, for that matter – you should still be able to follow these tips.

Tip 01: Make It Into Eye Candy

We can go on and on about utilizing web design principles, but, in the end, your theme just needs to look good.

This tips is going to sound obvious… but you’d be surprised how few theme authors really pay attention to this tip. Sure, we can go on and on about utilizing web design principles, but, in the end, your theme just needs to look good. First impressions count, and you don’t want to let your theme or template get thrown out of the buyer’s mind because it looks bad.

What does this really mean though? Your theme might have all the bells and whistles under the hood, but in the end, buyers are looking for something that looks good on the outside. I can personally testify to this too. I have no experience with Tumblr, so I went on a hunt for a Tumblog template to buy on ThemeForest. A lot of them just didn’t look that good, so they were immediately cast aside.

How do you make your visually appealing? There’s various visual practices that you can put to play in your theme, from color to typography. Your layout can also be vitally important, especially if you’re trying to sell a theme that’s specialized to a particular purpose, like e-commerce or a portfolio theme. The buyer wants to make sure he can use this theme for his particular purpose.

Pay attention to the images! Lots of theme authors use dull or boring stock images in their themes… but what if you treated your theme demo as if it were a advertisement for itself? Small things like including branded images that promote your theme, or even just photographs that relate to your theme’s topic can help boost that first impression for eager buyers.

The Reflex Theme does a good job at including informative (and sharp looking) images inside the theme demo.

While I probably can’t fit an entire “how to design great websites” article into this paragraph, take some time to explore the library of articles we have here at Webdesigntuts+ to learn about things like the Gestalt principle, colour theory and the Z and the F-layouts. Actually having good aesthetics, well-tailored typography and careful use of colour can result in your theme looking great, being reviewed and catching the eye of potential buyers.

Your theme should actually look good.

Tip 02: Avoid The Common Mistakes

A lot of mistakes can come up that can severely alter the overall aesthetics of your theme. The marketplaces wiki lists line height, visual hierarchy, text alignment and code quality under it’s common rejection factors for ThemeForest, so these should be something to watch out for. Here’s an interpretation of exactly what those guidelines are.

• Line Height – Line height can be crucial in determining the user friendliness of a website and good spacing will just generally make a webpage’s text easier on the eye. Unless you have a special template that requires more or less line spacing, the leading of the majority of your text should be approximately 1.3-1.6em to pass through review smoothly.
• Text Alignment – According to the wiki, it’s not a common rejection issue, but well suited text alignment can always help. The theory of text alignment’s effects on web design is an article of it’s own, but it’s very much related to other principles. Like line height, bad use of text alignment can contribute to bad readability and a worse user experience.
• Code Quality – Naturally, this isn’t something that’s all about web design, but good code quality can mean your theme passes the review with flying colors. Commented or easily editable code can also be a great selling point to buyers who want to later edit and customize their new theme. Your code should generally be validated too.

Agree that the right example is easier to read?

Tip 03: Create A Strong Visual Hierarchy

The theory of visual hierarchy is the idea that the most important element is the most prominent. Creating a strong hierarchy is particularly important since it catches the reader’s attention and draws them to specific elements, exactly what a business customer might want when he’s buying a template for his product. As a designer, you can tier the content into different levels so users can easily and efficiently scan the content to find points of interest.

Your buyers should be able to recognize your hierarchy easily and identify their potential use of it. Offering them a clear place to place their product, or an easy way to recognize post titles can be a real advantage during the pre-sale experience with your theme.

Tip 04: Make Your Product Solve Problems and Be Useful

Making your template useful and be able to solve problems for the user is always a convenient marketing points. ThemeForest is successful because it solves a problem; it solves the problem of getting a website designed by connecting a market of ready-made themes with buyers who need them. You should generally impose this principle into your designs.

Really, it’s just a standard business practice to fill a gap in the market. You should design themes around what potential buyers might want and anticipate any problems they might be having. If your theme is going to be useful to the buyer, they’ll probably pull out the card. Likewise, you should follow the current trends of the marketplace by examining what’s popular right now. At the time of writing, the most popular themes are portfolio themes with big sliders at the top so, if it’s possible, try to create a theme with these features if you want to maximize the opportunity for success. If you can work a slider in there, try, but naturally try to create a unique spin on things to attract attention to your specific theme.

The WordPress University theme addresses a specific problem: schools or educational institutions that need effective websites.

Tip 05: Cover Every Base

As you short try to target as much of ThemeForest’s audience as you can, without damaging your theme’s purpose, you should try to cover all bases of the website. If there’s the likelihood that a contact form will be used on the buyer’s site, consider customizing one yourself and throwing it into the mix. Not only will it end up helping the site look better in the long run, thanks to it’s coordinated design, you’ll have an extra selling point when you come to market your theme.

If you’re working on a WordPress theme that has some awesome features, create some custom shortcodes to help tailor the buyer’s content to your theme’s style or design. Not only will it end up looking better, but, like the contact form, will give you an additional selling point. If you’re working with a specific platform, like WordPress, try your best to customize and integrate as many features as possible (but don’t go overboard!) to help suit your theme to as many potential customers as possible.

Tip 06: Remember, ThemeForest Isn’t A Client

It’s important to remember that ThemeForest is not a client. In order to maximize your target market, it’s best to make your theme both as customizable and as widely useful as possible. You’ll see that a lot of the top selling themes have multiple options – coloring, layout, background images, etc. – and they seem to be what the user wants. If a buyer can easily swap around the color scheme, or the layout of the page, it’s a little more inclusive and can make the buyer think they’re getting multiple themes in one.

Similarly, targeting a niche market might have it’s advantages, but offering a template that has as many potential buyers as possible is mathematically better, right? If you’re going to design a magazine theme, consider not having it focused on golf. You’re alienating a potential segment of your audience by focusing on specific content instead of offering that as just one of a range of options.

Notice that the highest selling portfolio themes aren’t focused on specific content, they can be used by anyone.

Tip 07: Document Your Theme Well

A theme’s documentation is really vital when you don’t know who your customer is. Providing guidance on how to edit and customize your theme can be a key point in your theme, especially as they become more complex. In fact, the review team rate your documentation and display it in the sidebar on your theme’s page at ThemeForest so buyers know exactly what they’re getting.

Why is theme documentation so important? The chance is that your buyer is not someone who’s a web designer like yourself, so they probably aren’t going to understand even the core aspects of setting up and/or modifying the theme. Luckily, a clearly layed out PDF (or some other creative format) explaining the theme in a jargon-free environment can be a lifesaver, and potentially why some people choose to buy your theme. You can stress your support lines too, if you have any, so your buyer will feel safe that there’s nothing in the way of their investment.

Visit the Authors Resource Page for more notes on documentation.

Tip 08: Stop Using Lorem Ipsum!

The Redux Theme does a great job at including well thought out text inside the theme demo.

Thousands of people will be browsing through your theme on a monthly basis… so why not include some custom written text for your theme that helps them get a better idea of what your theme has to offer? It’s a no brainer, and it shouldn’t take you much longer than an hour to write up some actual content for your theme.

Tip 09: Have Someone Else Use Your Theme (Before You Submit It)

When you’re designing/developing a theme on your own, it’s easy to develop tunnel-vision for your theme. You start to ignore or overlook glaring mistakes… or you simply forget to add in elements that would make your theme better for users. Do yourself a favor: send your theme out to a couple people to try out your theme before you start selling it! Have them report back on what they found difficult (or broken) so that you can patch it up before launching the final product!

Tip 10: Make It Stand Out

You’re going to be selling your theme or template alongside thousands of others so the competition is real. Therefore, you need to accentuate your theme above all others and make it stand out. You’ve got a small canvas to sell your theme, so try to make the best of it.

Think of it as a CV for your template. What goes into a good CV? As a person, you’ll want to stress your skills, so it’s advisable you stress all the functions and features of your template. Remember how I said to cover all bases? Well, if you did make that custom contact form, or create all those shortcode mention them in your theme description, you’d be offering a more complete product. Think of your theme variations as your languages; the more there is, the better your package is, right? Instead of showing off experience, suggests potential uses for your theme to impart ideas into the buyer’s mind. Put on your business cap.

Be sure to, at all costs, include a live preview and screenshots so your buyers get a great look at exactly what the theme is and how it functions. Show off as much as you can in your marketing canvas, and then extend it through your own methods like social media or your own blog.

Bonus Tip: Consider Marketing Your Theme

BuySellAds is a marketplace that allows you to purchase ad spaces for your theme or product. You can even buy ads for here at Webdesigntuts!

This last tip is a “bonus” because it’s something that happens after you publish your theme. Lots of authors have started purchasing advertisements for their themes (through BuySellAds.com or Google Adwords). This is a simple way to drive more traffic to your theme, but consider other more creative marketing strategies as well:

• Write a tutorial for your theme (or a part of it).
• Submit your theme to various awards sites or Creattica.
• Run a contest around your theme.
• Showcase people who are using your theme creatively.

That’s just the tip of the iceberg as well – but the same things that you might consider to promote yourself as a web designer will also work when trying to promote your themes/products.

Conclusions

Creating a high performance theme is about creating an aesthetically pleasing design but also marketing it just right. If you mess up one side, don’t expect to be racking in the cash. Being an Envato site, a lot of you guys probably use the ThemeForest marketplace, so share your thoughts in the comments. If you’re a buyer, why not explain what makes you buy a theme?

• Various security hardening by Alexander Concha.
• Taxonomy query hardening by John Lamansky.
• Prevent sniffing out user names of non-authors by using canonical redirects. Props Verónica Valeros.
• Media security fixes by Richard Lundeen of Microsoft, Jesse Ou of Microsoft, and Microsoft Vulnerability Research.
• Improves file upload security on hosts with dangerous security settings.
• Cleans up old WordPress import files if the import does not finish.
• Introduce “clickjacking” protection in modern browsers on admin and login pages.

Consult the change log for more details.

Download WordPress 3.1.3 or update automatically from the Dashboard → Updates menu in your site’s admin area.

WordPress 3.2 Beta 2 also available

In other news, our development of WordPress 3.2 development continues right on schedule. We released Beta 1 thirteen days ago, and today we’re putting out Beta 2 for your testing pleasure.

This is still beta software, so we don’t recommend that you use it on production sites. But if you’re a plugin developer, a theme developer, or a site administrator, you should be running this on your test environments and reporting any bugs you find. If you’re a WordPress user who wants to open your presents early, take advantage of WordPress’ famous 5-minute install and spin up a secondary test site. Let us know what you think!

The plan is to start putting out release candidates in early June, and to release WordPress 3.2 by the end of the month. The more you help us iron out issues during the beta period, the more likely we are to hit those dates. To misappropriate and mangle a quote from Mahatma Gandhi: “Be the punctuality you want to see in the WordPress.” In other words, test now!

Here are some of the things that changed since Beta 1:

• Google Chrome Frame is now supported in the admin, if you have it installed. This is especially useful for IE 6 users (remember, IE 6 is otherwise deprecated for the admin).
• The admin is less ugly in IE 7.
• The blue admin color scheme has caught up to the grey one, and is ready for testing.
• We are now bundling jQuery 1.6.1. You should test any JS that uses jQuery. WordPress JavaScript guru Andrew Ozz has a post with more info.

Download WordPress 3.2 Beta 2

Advertise here

Welcome to May’s “The Best of ThemeForest” roundup where we take a look at the stuff coming out of one of the world’s most popular premium theme marketplaces. With over 3,800 site templates and themes available from 1,086 authors, we’ll pick out the best from this month, point out our top authors and keep you up to date on the latest marketplace news.

Featured Author

This month’s featured author is Koev. Dimitar Koev has a healthy portfolio of 4 items that have contributed to an amazing 1,167 sales at the time of writing, earning him a silver paw. His work on the premium OpenCart theme ModernStore has ranked him up nearly 500 purchases and a full five star rating.

If you’re looking for a great OpenCart theme, this might be the guy!

Featured New Author

addway has only one file available, a $35(+2) portfolio WordPress theme. Yet he’s still managed to garner 425 sales in less than a month, an impressive achievement for any author. addway’s portfolio isn’t that informative so we have little background information, excpet that he joined only in February of this year!

Free File of May

Slideo is this month’s free file of the month, the one file on ThemeForest you can download without charge for one month only (and as the end of the month is arriving soon, you better be quick!).

Slideo is an impressive business theme with sliding menu and readymade page templates. Plus, the theme works in seven different colours so you ncan choose a style your like.

The Best of ThemeForest…

As with each month, there’s been some great themes in May! I’ve picked out my personal favourite files that were published in April alone but be sure to share yours in the comments.

Kozuka

Kozuka is a corporate landing page with a “sleek CSS3 touch”. The typography of Kozuka stands out as a mix between some serif fonts and some replaced ones. The developer also points out the commented code which makes it either to make further edits and to customize the theme to give it your own style.

Brisk

Brisk is another business-oriented portfolio theme for WordPress with a nice, modern style. The larger image at the top is in fact a slider, with six of them being included in the package alongside 150+ custom fonts and 15+ page templates.

Core

Core is a minimalist theme aimed at photographers or those with an extensive gallery of images waiting to be shown off. The theme itself features three homepage styles, a built-in font manager for choosing your own custom font faces and a custom image/galleries uploader for better managament of your site. In four days, it’s already grabbed 71 sales.

NANICA

NANICA is yet another portfolio theme (the ThemeForest authors seem to love these!), this time optimized to a single page that’s completely jQuery powered. It features an elegant scrolling mechanism that slides between the different sections, each beautifully designed content areas in a simple, clean and elegant design. Plus, it’s only $9(+2)!

CleanSlate

I don’t normally feature admin templates but CleanSlate is one of my recent favourites. The HTML5 and CSS3 compliant admin theme features a clean, simple dashboard style with built in progress bars, form validation, widgets, tabs and accordions. I particularly love the jQuery-powered animation built into this theme!

Archin

Have you got any idea what Archin is? Really, no? Well it’s another portfolio theme created for WordPress! The description of this theme highlights the customizability options that it offers including unlimited sidebars in a custom admin panel, an easy form creator and a visual composer for customizations.

Plus over 3,870 more…

As always, ThemeForest hosts thousands of great themes. Marrying a great review team with stringent quality guidelines, pretty much every file on ThemeForest is great and you should be sure to check out the wide selection available.

The Month at ThemeForest

The Marketplaces Get a Makeover

ThemeForest and all the other marketplaces have grabbed themselves a makeover with some visual design tweaks ensured to please many. The top half (or above the fold, for older designers) has seen the most changes with a redesigned navigation bar linking to the main categories, and some rearranged item titles and breadcrumbs. I don’t work for Envato so I reckon I can make an unbias statement in declaring that i’m loving it! Great work guys.

ThemeForest Hits 1,000 WordPress Themes

If you’ve ever bought a WordPress theme from ThemeForest, there’s at least another 999 for you to try. This is because ThemeForest hit it’s 1,000 milestone of themes compatible with the popular WordPress platform. It took 2.5 years to get to this point but i’m sure some authors have enjoyed the ride, especially the one who sold $160,000 in just seven months!

To celebrate, the WP1000 site is giving away two sets of icons from SoftFacade and Turbomilk, and asking you to vote on which one is better. Best thing is, you can even use them in CodeCanyon or ThemeForest items!

ThemeForest Continues into WPCandy’s Semi Finals

WPCandy is running a Theme Madness contest in which various theme retailers and marketplaces are pitted against each other. ThemeForest has made it into the semi-finals and is currently against Elegant Themes. Be sure to vote for the paw!

As always, this is software still in development and we don’t recommend that you run it on a production site — set up a test site just to play with the new version. If you break it (find a bug), please report it, and if you’re a developer, try to help us fix it.

If all goes well, we hope to release WordPress 3.2 by the end of June, though that is (again, as always) subject to change depending on how the beta period goes. The more help we get with testing and fixing bugs, the sooner we will be able to release the final version. If you want to be a beta tester, you should check out the Codex article on how to report bugs.

Here’s some of what’s new:

• Performance improvements like you wouldn’t believe. What’s that mean? Things are faster!
• Distraction-free Writing. The visual editor’s full-screen composing experience has gotten a major overhaul, and is now available from HTML mode, too. More than ever, WordPress allows you to focus on what matters most — your content.
• Admin UI Refresh. The last major redesign of the WordPress admin was in 2008. This isn’t a major redesign, just a little facelift to keep us feeling young. WordPress turns 8 later this month, you know.
• New Default Theme. Introducing Twenty Eleven, based on the popular Duster theme. Rotating header images, post format support, and more.
• Browse Happy. WordPress is made to work with modern browsers. If you visit your Dashboard using an outdated web browser, we’ll let you know there’s a newer version available.
• Admin Bar. We’ve added more links to the admin bar to make it even more useful.

Remember, if you find something you think is a bug, report it! You can bring it up in the alpha/beta forum, you can email it to the wp-testers list, or if you’ve confirmed that other people are experiencing the same bug, you can report it on the WordPress Core Trac. (I recommend starting in the forum or on the mailing list.)

Theme and plugin authors, if you haven’t been following the 3.2 development cycle, please start now so that you can update your themes and plugins to be compatible with the newest version of WordPress.

Note to developers: WordPress is built by the contributions of hundreds of developers. If you’d like to see this release come out on time, I encourage you to pitch in. Even if you don’t have time to do testing on the beta version, you could help us by contributing a fix for one of the many bugs we already know about.

Download WordPress 3.2 Beta 1

Advertise here

Today we’re continuing the tutorial series for creating the ShutterPress design by converting it from a raw PSD to a functional website using HTML and CSS. By now, we’ve created the initial site design and gathered the required assets for coding. Now we’re going to actually code it so it’ll work in all major browsers!

Intro: Day 3, HTML/CSS Conversion

Today is all about converting our PSD design into a fully working HTML site! We’ll walk you through the markup step by step, until we have a site that looks great on all major browsers. We’ll be approaching this from an intermediate level of understanding, so if we move too quickly past any of the basic steps, feel free to ask any specific questions in the Comments section below.

A special shoutout goes to CodeMyConcept, who has graciously provided the code and tutorial for this day of the series!

If you missed the previous two days of this series, check them out here:

• Day One: Design
• Day Two: Pre-flight

Ok, with our goals now clearly defined, let’s begin!

Step 1 Basic Folder Structure and Layout

First, we start out by creating the basic folder structure for our project, which we definitely need to have to keep assets well structured and organized.

In this case, we’re going to need a “css” folder with our main css file, an “images” folder and a “js” (Javascript) folder once the HTML and CSS is complete so we can add the slider, lightbox and accordion plugins. Also the index.html file in the root folder

Then we create the Basic HTML structure of the layout with the Left and Right sections. We’re going to be using a wrapper div to contain and center everything and our Left and Right containers inside, as well as a div at the top and bottom of the wrapper to help us with the rounded corners while keeping the layout flexible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ShutterPress</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen" />
</head>
<body>
<div id="wrapper">
	<div id="wrapper-top">
	</div> <!-- END WRAPPER TOP -->
	<div id="left">
		LEFFT MENU HERE
	</div> <!-- END LEFT MENU -->
	<div id="right">
		RIGHT CONTENT HERE
	</div> <!-- END RIGHT CONTENT -->
	<div id="wrapper-bottom">
	</div> <!-- END WRAPPER BOTTOM -->
</div> <!-- END WRAPPER -->
</body>
</html>

We actually prefer to create the HTML before writing any CSS, although some people do a section of HTML and CSS at the same time and then move on to the next section. We have found that doing the whole HTML first helps us think of the CSS in advance and everything else that might be needed, such as Javascript or PHP includes. All I add at this point is my CSS Reset.

Step 2 Left Menu HTML

So we start by coding the left side menu. Here, we’re going to need an h1 tag and a link for our logo, and an unordered list for our menu items. We also need to nest another unordered list on the third li tag fo our submenu, and do the same with some dummy items on the second li tag just so we can see our javascript accordion working later on.

We also need to add some “opened” and “closed” classes to the links and the submenu so we can control the icons and which submenu is opened by default, and the active class to highlight the page we’re currently viewing.

<h1 class="logo"><a href="#">ShutterPress</a></h1><!-- END LOGO -->
<ul class="menu">
	<li><a href="#">Home</a></li>
	<li>
		<a class="closed" href="#">About the Studio</a>
		<ul class="sub-menu closed">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
		</ul> <!-- END SUB MENU -->
	</li>
	<li>
		<a class="opened" href="#">Image Galleries</a>
		<ul class="sub-menu">
			<li><a class="active" href="#">4X4 Gallery</a></li>
			<li><a href="#">Portrait Gallery</a></li>
			<li><a href="subpage.html">Slider Gallery</a></li>
		</ul> <!-- END SUB MENU -->
	</li>
	<li><a href="#">Contact</a></li>
</ul> <!-- END MENU -->

Now, right after that come the social icons and search field in our Left section located at the bottom. So, we’ll be creating a container div for the bottom section and separate [divs] for each of the two parts inside that container.

For the Social icons we’ll need a span for the text and a list for the icons, each with a class to help get the correct icon image and its respective hover state.

For the Search section, we’ll create a form and divs containing the corresponding inputs to help float them and add the backgrounds and icons. Doing this rather than applying the styles directly to the inputs works a lot better to avoid cross-browsing issues with line heights and text indentation.

<div id="left-bottom">
<div class="social">
		<span>Social:</span>
		<ul>
			<li><a class="tumblr" href="#">tumblr</a></li>
			<li><a class="picasa" href="#">picasa</a></li>
			<li><a class="vimeo" href="#">vimeo</a></li>
			<li><a class="flickr" href="#">flickr</a></li>
			<li><a class="twitter" href="#">twitter</a></li>
			<li><a class="facebook" href="#">facebook</a></li>
			<li><a class="rss" href="#">rss</a></li>
		</ul>
	</div> <!-- END SOCIAL -->
	<div class="search">
		<form action="#" method="get">
			<fieldset>
				<div class="left">
					<input type="text" value="" />
				</div>
				<div class="right">
					<input type="submit" value="" />
				</div>
			</fieldset>
		</form>
	</div> <!-- END SEARCH -->
</div> <!-- END LEFT BOTTOM -->

So here’s how it looks in our browser along with the CSS Reset

Step 3 Right Content HTML

Now that we have completed our left menu, we can start coding the Right content part for the thumbnail gallery.

So first we create an unordered list of images inside links so they’re click-able for our lightbox plugin, and after that we create a div to contain our previous and next buttons.

<ul class="thumbnails">
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb2.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb3.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb4.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb5.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb6.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb7.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb8.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb9.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb10.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb11.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb12.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb13.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb14.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb15.jpg" alt="thumbnail" width="150" height="121"/></a></li>
	<li><a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb16.jpg" alt="thumbnail" width="150" height="121" /></a></li>
</ul> <!-- END THUMBNAILS -->
<div class="navigation">
	<a href="#" class="prev">Previous</a>
	<a href="#" class="next">Next</a>
</div> <!-- END NAVIGATION -->

At this point, we need to start slicing the thumbnails and saving them with their corresponding name from the HTML so we can have some inline images showing.

Here’s how all our HTML should be looking in Firefox

Step 4 CSS Reset and Wrapper

Now for some styling we set up some general settings for the fonts, text and links colors and background image

/*------------------------------*/
/*  GENERAL RESET              */
/*----------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align: baseline;
	background:none;
}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input,textarea,select{
	font:11px Arial, Helvetica, sans-serif;
	vertical-align:middle;
	padding:0;
	margin:0;
}
input:focus, textarea:focus {
	outline: none;
}

form,fieldset{border-style:none;}

html,
body {
   margin:0;
   padding:0;
   min-height:100%;
}

/*---------------------------------*/
/* GENERAL SETTINGS               */
/*-------------------------------*/
body {
      height:100%;
      font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif;
      color: #000;
      background: url('../images/bg.jpg') repeat #fff;
}
a {text-decoration:none; color: #000;}
a:hover {text-decoration:none; color: #0285da;}

Then we set up the wrapper styles so we can build the base of our layout, which we begin todo by defining the width of our wrapper and center it with a margin: 0 auto;

For the top and bottom divs that we defined earlier, we set up background images and the required dimensions to create our top and bottom rounded corners, and for the wrapper we set up a background image repeated in the Y axis that will cover our content containing the division line between the Left and Right Content.

For the wrapper-bottom div we need to set up a clear:both; because once I float my Right and Left containers the wrapper is going to collapse, so we need to prevent this by clearing the floats.

/*--------------------------*/
/*     WRAPPER             */
/*------------------------*/
#wrapper-top {
	background:url("../images/content-top.jpg") no-repeat scroll center top #FFFFFF;
	height:18px;
	width:994px;
}

#wrapper {
	width: 994px;
	overflow: hidden;
	margin: 64px auto 0;
	background:url("../images/content-bg.jpg") repeat-y scroll center center #FFFFFF;
}

#wrapper-bottom {
	background:url("../images/content-bottom.jpg") no-repeat scroll center top #FFFFFF;
	height:61px;
	width:994px;
	clear: both;
}

Here’s the result in our browser:

Step 5 Left Menu CSS

Now that we have our wrapper ready we can move on with the content: first, we set up the width of both the Right and Left containers so we can float them to the right position.

/*--------------------------*/
/*     LEFT MENU           */
/*------------------------*/

/* Main Menu */
#left {
	width: 235px;
	float: left;
}

/*------------------------------*/
/*   RIGHT CONTENT             */
/*----------------------------*/

/* Thumbnail Gallery Content*/
#right {
	width: 758px;
	float: right;
}

Now we start styling the navigation by creating a sprite image for the logo, buttons and icons on the design.

This particular layout doesn’t seem like it’s going to grow in height, but we still want to keep things flexible just in case there’s a future need of adding more elements to the navigation.

So we set up the Left container with a minimum height so the left-bottom div can be absolutely positioned without having to use a huge margin to push it down, this way if new elements are added the layout will still keep its original dimensions.

We also set up the links in the navigation to be displayed as blocks so the whole area can be clickable and not just the text and add the open and close backgrounds using their respective clases and adjusting the position of our sprite.

The sub-menu with a class ‘closed’ is set to display: none; so only the default one is showing.

/*--------------------------*/
/*     LEFT MENU           */
/*------------------------*/

/* Main Menu */
#left {
	width: 235px;
	float: left;
	min-height: 615px;
	position: relative;
}

#left .logo a {
	background:url("../images/sprite.png") no-repeat scroll 0 0 transparent;
	display:block;
	height:32px;
	margin:8px auto 0;
	text-indent:-999999px;
	width:190px;
}

#left .menu {
	width: 100%;
	border-top: 1px solid #eaeaea;
	margin-top: 30px;
}

#left .menu li a {
	display: block;
	height: 35px;
	line-height: 35px;
	padding-left: 22px;
	border-bottom: 1px solid #eaeaea;
}

#left .menu li a.active {
	color: #0285DA;
	border-right: 1px solid #fff;
}

#left .menu li a.closed {
	background:url("../images/sprite.png") no-repeat scroll 46px -231px transparent;
}

#left .menu li a.opened {
	background:url("../images/sprite.png") no-repeat scroll 46px -257px transparent;
}

#left .menu li .sub-menu li a {
	padding-left: 38px;
}

#left .menu .sub-menu.closed {
	display: none;
} 

#left-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
}

For the bottom social icons we set up the images using the respective clasess and setting up the background images using postions, this goes as well for the hover status.

/* Social */
#left-bottom .social {
	overflow: hidden;
	height: 34px;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	padding-left:25px;
}

#left-bottom .social span {
	float: left;
	line-height: 34px;
}

#left-bottom .social ul {
	float:left;
	margin:9px 0 0 10px;
}

#left-bottom .social ul li {
	float: left;
	height: 34px;
}

#left-bottom .social ul li a {
	background:url("../images/sprite.png") no-repeat scroll -5px -50px transparent;
	display:block;
	height:16px;
	width:16px;
	margin: 0 5px 0 0;
	text-indent: -999999px;
}

#left-bottom .social ul li a:hover {
	background-position: -5px -80px;
}

#left-bottom .social ul li a.picasa {
	background-position: -26px -50px;
}

#left-bottom .social ul li a.picasa:hover {
	background-position: -26px -80px;
}

#left-bottom .social ul li a.vimeo {
	background-position: -47px -50px;
}

#left-bottom .social ul li a.vimeo:hover {
	background-position: -47px -80px;
}

And for the search part, we’re basically floating the input container divs and setting the syles to them rather than to the input.

/* Search */
#left-bottom .search {
	overflow: hidden;
	margin-top: 12px;
}

#left-bottom .search .left {
	background:url("../images/sprite.png") no-repeat scroll -5px -203px transparent;
	float:left;
	height:27px;
	margin-left:20px;
	padding: 6px 0 0 10px;
	width:158px;
}

#left-bottom .search .left input {
	border: none;
	background: transparent;
	width: 100%;
}

#left-bottom .search .right {
	background:url("../images/sprite.png") no-repeat scroll -173px -203px transparent;
	float:left;
	height:27px;
}

#left-bottom .search .right input {
	background:none repeat scroll 0 0 transparent;
	border:medium none;
	cursor:pointer;
	height:27px;
	width:27px;
}

So here’s what we have right now in firefox

Step 6 Right Content CSS

Here we’re just floating the list items to get a grid display, we add padding, background color and borders to get a frame for each thubmnail and also add margins for separation.

Finally. we have our buttons with a container div that is centered and both links are floated.

/*------------------------------*/
/*   RIGHT CONTENT             */
/*----------------------------*/

/* Thumbnail Gallery Content*/
#right {
	width: 758px;
	float: right;
}

#right .thumbnails {
	overflow: hidden;
	padding:10px 0 0 32px;
}

#right .thumbnails li {
	float: left;
	margin: 0 21px 18px 0;
}

#right .thumbnails li a {
	border: 1px solid #eaeaea;
	padding: 2px;
	background: #f2f2f2;
	display: block;
}

#right .navigation {
    margin: -10px auto 0;
    overflow: hidden;
    width: 50px;
}

#right .navigation a {
	background:url("../images/sprite.png") no-repeat scroll 0 0 transparent;
	display:block;
	float:left;
	height:21px;
	text-indent:-999999px;
	width:21px;
}

#right .navigation .prev {
	background-position: -159px -75px;
	margin: 0 8px 0 0;
}

#right .navigation .next {
	background-position: -186px -75px;
}

Heres our first page finished in firefox!

Step 7 Second Page HTML

Moving on to our subpage, what we do is duplicate our index.html and name it something like subpage.html or inner.html, then we take out all the content in our #right container and start building the html needed for our slider gallery and the 3 modules below.

We need a div to hold the entire markup for my slideshow, a list of images that will be the slides and we’ll also be using 3 diferent versions of the images so we can see some action later on with the jQuery Cycle plugin.

We’re also setting a blank div that will be absolutely positioned on top of the images to function as a frame in case this layout ever needs to be implemented into a CMS to get some dynamic content. If this happens, we can just add any image without having to photoshop the rounded corners and shadows before hand.

And finally for the slideshow we need to create a navigation div with a couple of links for our “previous” and “next” gallery navigation.

<div id="gallery-holder">
	<ul class="slideshow">
		<li><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/slideshow/slide1.jpg" alt="slideshow 1" width="719" height="442" /></li>
		<li><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/slideshow/slide2.jpg" alt="slideshow 2" width="719" height="442" /></li>
		<li><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/slideshow/slide3.jpg" alt="slideshow 3" width="719" height="442" /></li>
	</ul> <!-- END SLIDESHOW -->
	<div class="slideshow-frame"></div>
	<div class="navigation">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div> <!-- END GALLERY NAVIGATION -->
</div> <!-- END GALLERY HOLDER -->

Our last block of content has our 3 modules set in their own container, each module being a div on its own that I will float so they’re next to one another. Inside I have and h2 tag for the title and a paragraph for the text.

<div id="modules-holder">
	<div class="module">
		<h2 class="module-one">Module One</h2>
		<p>Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices varius. Lorem ipsum text.</p>
	</div>
	<div class="module">
		<h2 class="module-two">Module Two</h2>
		<p>Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, semper rhoncus diam justo in ante. Aliquam in ultrices eleifend libero, in sit amen consectetur velit quis.</p>
	</div>
	<div class="module">
		<h2 class="module-three">Module Three</h2>
		<p>Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet semper quis, vehicula quis velit.</p>
	</div>
</div> <!-- END MODULES HOLDER -->

Step 8 Second Page CSS

In this particular design, getting the frame for the slides was a bit tricky, so here’s what we did:

We took the layer called “Shape 90″ and dropped the fill to 0%. Then right-clicked the layer called “1720729_high”, selected release clipping mask and then hid the layer.

Went back to the layer “Shape 90″ and set the opacity to 50%. Right clicked the layer and made a duplicate, selected both “Shape 90″ layers and merged them.

Now you can save the frame as a separate transparent .png and just add some white background in the corners so it covers the images on the back.

We set the dimensions for the modules and floated them to get them inline; after that we set up the styles along with the sprite as background image for the icons.

We set the list items from the slider to have a position: absolute; with relation to the ul so they’ll collapse and look as just one image so we can get the real look of the layout, we will add the functionality after the whole thing is ready.

The previous and next buttons are also positioned absolutely so we can get them centered vertically.

/* Slideshow Gallery Content*/
#gallery-holder {
	position: relative;
	width: 719px;
	margin:20px auto 0;
	height: 442px;
}

#gallery-holder .slideshow-frame {
	background:url("../images/slideshow-frame.png") no-repeat scroll 0 0 transparent;
	height:442px;
	position:absolute;
	top:0;
	left: 0;
	width:719px;
	z-index: 10;
}

#gallery-holder .slideshow li {
	height:442px;
	position:absolute;
	top:0;
	width:719px
}

#gallery-holder .navigation a {
	height:92px;
	left:0;
	margin-top:-44px;
	position:absolute;
	top:50%;
	width:47px;
	z-index:15;
}

#gallery-holder .navigation a.prev {
	background-position:-6px -103px;
	margin-top:-44px;
}

#gallery-holder .navigation a.next {
	background-position:-65px -103px;
	left:auto;
	right:0;
}

#modules-holder {
	overflow: hidden;
	margin-top: 24px;
	margin-left: 20px;
}

#modules-holder .module {
	float: left;
	width: 204px;
	margin-right: 40px;
}

#modules-holder .module h2 {
	font-size:18px;
	font-weight:normal;
	margin-bottom:5px;
	padding-left:25px;
}

#modules-holder .module h2.module-one {
	background:url("../images/sprite.png") no-repeat scroll -128px -170px transparent;
}

#modules-holder .module h2.module-two {
	background:url("../images/sprite.png") no-repeat scroll -128px -140px transparent;
}

#modules-holder .module h2.module-three {
	background:url("../images/sprite.png") no-repeat scroll -128px -110px transparent;
}

#modules-holder .module p {
	color: #6a6a6a;
	line-height: 15px;
}

After all this, we can see that the module titles have a Museo font on them which is not a web-safe font, so we’re going to need to set this up with @font-face. So we ran the font through Font Squirrel (http://www.fontsquirrel.com/fontface/generator) and placed the fonts in their own fonts folder in the root of our Project and set up the CSS in our general settings using the right paths for the fonts.

/*---------------------------------*/
/* GENERAL SETTINGS  */
/*-------------------------------*/
body {
      height:100%;
      font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif;
      color: #000;
      background: url('../images/bg.jpg') repeat #fff;
}
a {text-decoration:none; color: #000;}
a:hover {text-decoration:none; color: #0285da;}

@font-face {
    font-family: 'Museo700';
    src: url('../fonts/museo700-regular-webfont.eot');
    src: url('../fonts/museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo700-regular-webfont.woff') format('woff'),
         url('../fonts/museo700-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo700-regular-webfont.svg#Museo700') format('svg');
    font-weight: normal;
    font-style: normal;
}

So all we need to do now is set the font family to our h2 tags, and now our second page is complete.

#modules-holder .module h2 {
	font-family:'Museo700';
	font-size:18px;
	font-weight:normal;
	margin-bottom:5px;
	padding-left:25px;
}

Step 9 jQuery Magic

Now to add some functionality and animation to our Project we’re going to be using two plugins: jQuery Cycle for our slideshow (http://jquery.malsup.com/cycle/ ) and prettyPhoto for our lightbox gallery ( http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ ) and then weÕll create a custom function for our menu accordion.

Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the “js” folder, stylesheets to the “css” folder, etc. ), the cycle plugin can be linked from Github and jQuery can be linked from Google APIs.

We’ll also create a main.js file in our JS folder where we can put our custom function and plugin configuration.

So, we reference our stylesheet in the header of the html files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ShutterPress</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
</head>

We also reference our javascript files at the bottom of our document just before the closing html tag.

</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>

Now we go back to our thumbnail list and set up the links with the rel attribute for our lightbox gallery to work. We also have the links pointing at a place holder 500×500 image so we can display something on our lightbox

<li><a href="images/500X500.gif" rel="prettyPhoto"><img src="http://d3pr5r64n04s3o.cloudfront.net/136_ShutterPress/code_phase/images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>

And finally, we go over to our main.js file and start configuring our plugins. Make sure you read the plugins’ documentation so you can find out exactly how they work and what options you have to customize them.

For our accordion we need to set up a click function that checks if the link has a class of “opened” or “closed”. If it’s “closed”, then it opens the respective submenu and collapses all others and changes the class of the links so the right icon is displayed. If the one that’s being clicked has a class of “open”, then it just closes it and changes the icon.

$(document).ready(function() {

	//prettyPhoto LIGHTBOX
	$("a[rel^='prettyPhoto']").prettyPhoto();

	//MENU ACCORDION
	$('#left .menu li a').click(function(){
		if ( $(this).hasClass('closed') ) {
			$(this).toggleClass('opened closed');
			$(this).parent().siblings().find('.sub-menu').slideUp();
			$(this).parent().siblings().find('a.opened').toggleClass('opened closed');
			$(this).next().slideDown();
			return false;
		} else if ( $(this).hasClass('opened') ){
			$(this).toggleClass('opened closed');
			$(this).next().slideUp();
			return false;
		}
	})

	//SLIDER GALLERY
	$('.slideshow').cycle({
		fx: 'fade',
		next: '#gallery-holder .navigation a.next',
		prev: '#gallery-holder .navigation a.prev'
	});
});

End of Day 3: Review

And now we have a 100% finished Project with working galleries and submenu animations. Enjoy!

In the final day of our tutorial series, we’re going to walk you through how to create your own custom variations of this template using just a couple quick edits. From dark, grungy styles to modern metallic effects, you won’t want to miss the final day!

Oh! And we mentioned this on the first day of the tutorial, but if you’re interested in having a WordPress version of this template made available at ThemeForest, let me know in the comments section!

Coding Credits

The coding and tutorial for this phase of the series was all provided by CodeMyConcept, which offers a wide range of coding services for designers – from PSD>HTML conversions to Email templates and WordPress theme conversions. Check out their site at CodeMyConcept.com!

Advertise here

I’m a huge fan of photo-centric site designs… so today I’m excited to launch a new “complete site” tutorial that’s geared towards photographers, illustrators, and other visual creatives. In Day 1, we designed the template in Photoshop using some special tricks and techniques. Today, in Day 2, we’ll walk through the final design phase and then do some “pre-flight” preparation for the coding phase, which we’ll go over in detail in Day 3. In Day 4, we’ll show you how to create three completely different sites using the same raw HTML.

Intro: Day Two, “Pre-Flight” Preparation

Today’s session is going to be relatively quick in terms of technical tricks… but we’ll be going heavy on the “workflow” tips, so pay attention if you’re curious about the phase of a project that happens after design and before the coding begins.

Let’s begin today’s session with some general notes about what “pre-flight” is: When you’re finished designing a website, there are a few crucial steps that should ideally take place before you begin the actual coding process. The first step is to start slicing up our design.

The full written step-by-step guide is below. We’ll be starting with the Photoshop document that we created in Day 1, but you can also download the demo PSD to check your work against mine.

Ok, with our goals now clearly defined, let’s begin!

Step 01: Image Slicing and the Almighty CSS Sprite

Identify What Images We’ll Need to Slice

The first step is slicing up any images that will be required in the coded template. In our case, this process is quite simple: take a good hard look at the template and point out all of the design elements that can’t be duplicated with CSS or other coding tricks. Here’s our list:

1. The Logo
2. The Background Image
3. The Footer Shadow
4. The Accordion +/- Graphic
5. The Slider Left/Right Tabs
6. The Grid Pagination
7. Social Media Icons
8. Search Bar + Magnifying Glass
9. The Content Photos (Slider Images + Grid Thumbnails)
10. The Rounded Corner Images (yes, we can recreate this with CSS3, but we’ll stick with images to be safe for the time being)
11. The Homepage Slideshow Overlay (the inner shadow)

Let’s label where these are on our design (click for the full size image):

“>

Slicing these isn’t difficult so I won’t go into too much depth, but before we get started it’s worth considering if some of these images can be combined into a single CSS Sprite.

What’s a CSS Sprite? Put simply, a sprite is a method of using a single image as a means of storing several smaller images. For instance, take a look at the sprite that’s being used at Webdesigntuts:

When we start coding, we can simply use CSS positioning and cropping of the image to show the piece of the sprite that we want.

Why Use a CSS Sprite? Speed! Using sprites to store images will reduce the time it takes to load an entire web page… when images get re-used over and over again on multiple pages, this can mean a lot of saved time.

Sprites are best used with smaller images that get used over and over again. For instance, most of the assets discussed above can actually be reduced to this sprite:

In a single sprite, we’ve already prepped the bulk of our design for coding… and it’s all under 19kb! Not bad right?

To create your own sprite, just create a blank document (start out with any size, you’ll eventually crop this down to just barely fit each element on the sprite), then add in the design elements with a reasonable amount of padding between each element. Here are some additional tricks:

• Elements that are spaced out evenly in the design should be spaced out evenly in the sprite (like the social media icons)
• If an element is transparent (like our slider tabs), make sure it’s showing up as properly transparent in the sprite
• Save the final sprite image as a transparent PNG-24… then you’re ready to rock and roll!

For the remaining images, we can simply create our own generic slices. I’ll list them below and describe each one (and why it’s not a sprite):

The inner shadow overlay for the Slidedown. It’s not a sprite because it’s large (which means that it would unnecessarily beef up the size of the sprite).

The top and bottom rounded corners: These aren’t sprites for a few reasons: 1) like the above example, they are large and unwieldy; 2) these are likely to be re-skinned or resized at a later date, which means loading them into a sprite just makes for additional work and 3) there’s a good possibility that we might decide to ditch these images for CSS methods in the future.

The background image: This one’s not a sprite because 1) it is likely to be swapped out with another BG image and 2) it needs to repeat indefinitely, which sprites just don’t do well.

Other “Not-Sprites”: Obviously, we won’t be loading our thumbnails or any other content images in as sprites. The main reason here is practicality… Sprites are intended for basic UI and branding elements that can load quickly and speed up a site… if we loaded EVERY image into a single sprite, it’d make for an extra long loading time, even if it sped things up after it loaded. Think of the pre-loaders for those huge Flash websites a few years back

The other obvious reason is that these content images will likely be changing each time someone updates the site. The Sprite image is intended to be pretty much unchanged so long as the site design remains the same.

Final slicing notes: It probably goes without saying, but there are other ways of slicing this particular design. Different approaches may make sense for your own variation of this design… so don’t limit yourself to using the ideas above. If you want to attack the rounded-corners and the background shadow using CSS3, the z-index property and a transparent PNG, by all means go for it!

Step 02:Gathering the Scripts/Plugins/Add-Ons We’ll Need to Use

Now that we’ve got our image assets all ready to go, it’s time to gather our scripts in one spot so that when we sit down to the hard coding, we’ll be ready for action. Taking a look again at our design, let’s identify the key areas that will require additional scripts or plugins:

The Lightbox: prettyPhoto

Every good photographer template needs a lightbox… and there are few better than prettyPhoto out there right now. It’s easy to install/customize, and it’s going to offer quite a few extra features that other lightboxes don’t – like thumbnail navigation, custom sharing add-ons, and more.

The Accordion Menu

This is a pretty simple problem using some basic jQuery… so we’ll actually be using a custom, lightweight script for this one. Check back on Day 3 to see how it works!

The Sliders: jQuery Cycle

jQuery Cycle is going to handle the heavy lifting for our image sliders. It’s an incredibly well documented plugin, which means it’ll be easy to setup (and customize) to fit our template’s needs.

Font Replacement:

I’ve used the font Museo in the design, so we’ll need to find a way to use this in the coded version. The quickest way to set this up is with @font-face. So, we ran the font through Font Squirrel (http://www.fontsquirrel.com/fontface/generator) to create our font files that we can use in Day 3.

Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the “js” folder, stylesheets to the “css” folder, etc. ), the cycle plugin can be linked from Github and jQuery can be linked from Google APIs.

End of Day 2: Review

At this point we should now be ready to start the HTML/CSS conversion. We’ve designed our site template, sliced any images that we’ll need to use, and gathered all of the third party scripts that we’re going to require to make the site function as we want it to. In the next stage, we’ll be doing the actual coding… so get ready for Day 3!

Advertise here

I’m a huge fan of photo-centric site designs… so today I’m excited to launch a new “complete site” tutorial that’s geared towards photographers, illustrators, and other visual creatives. In Day 1, I’ll be designing the template in Photoshop using some special tricks and techniques. In Day 2 we’ll walk through “pre-flight” preparation for the coding phase, which we’ll go over in detail in Day 3. In Day 4, we’ll show you how to create three completely different sites using the same raw HTML. Ready to get started? Let’s do this!

Intro: About the Design

As with any web design project, it’s important to identify the goals of any project… so, before we dive in, let’s say a few words about what our eventual goals are:

• Design a site template that can be used by photographers to show off their portfolios.
• Use a simple, unobtrusive navigation interface.
• Display images as thumbnails (without any text) in a paginated grid layout.
• Allow for easy layout flexibility.
• Code it! Using standards compliant HTML/CSS and free, open source jQuery plugins.

The last thing that I’ll mention is perhaps the most important: it must be 100% customizable using the least amount of work possible! What does this mean for us? I’d like anyone to be able to re-brand and re-skin the entire layout without ever needing to touch the mess around with rewriting any of the core HTML. That ideally means that by swapping out a few images (the logo and a custom background image) and some CSS, that an entirely different outcome can be created… which is why on the final day of this series, we’re going to devote and entire session to creating customizations!

Ok, with our goals now clearly defined, let’s begin!

The Video Tutorial

The video tutorial is intended to be a companion to the written tut below. Think of it as “supplemental” material – I won’t cover everything that’s in the written portion, but sometimes it’s just nice to see someone else work in Photoshop to pick up other tricks, efficiency tips, and other techniques that you might not otherwise be familiar with.

Oh! It’s worth it to turn on HD and scale up the video to fill your screen if you have the bandwidth. You can also download the entire HD video directly from Blip (under the Files sidebar widget).

The Written Tutorial

The full written step-by-step guide is below. We’ll be starting with a blank Photoshop document, but you can also download the demo PSD to check your work against mine.

Step 01: Setting Up Our Document

Start by creating a new document at 1280 x 800px in size. Why? Because this will give us a nice big canvas to play around with. The width of our final design won’t actually be 1280px, but we want to see some background color just like we’d normally see in a large browser window.

What Size Should The Container Be?

The first practical dilemma with any web project is to decide the size of the document that you’re going to be working with. In our case, I’d like the design to sit front and center on the screen, fill up as much space as possible on a smaller monitor – and not look too tiny on a huge monitor.

Width Considerations: I’m opting to use 994px as the total width. This number is somewhat arbitrary – it could have been a few px wider or a few px smaller, but ultimately it will do the job. Why? Because it fits inside the 1003px “safe zone” for the most popular browsers being used right now, with a bit of padding on either side to be safe.
Height Considerations: I’m going to work with the height of 644px inside Photoshop The height is another arbitrary number in the case of this design. Why? Because 1) it’s going to be adjustable from the CSS, 2) we’re going to let this “flex” to fit the content that we throw inside and 3) I’m less concerned about the fold height than I might be for a larger scale project.

The key thing to note here is that this is all going to be 100% adjustable from the CSS once we’re done. So, if you happen to prefer a wider layout with a more shallow height, you’ll be able to get just this within seconds of deciding your preference. The idea here is to keep things fluid even though we’re using a fixed size template… so don’t get too hung up on the precise numbers just now.

Caveat: This “keep it fluid” approach is actually unique to this particular template… I’ll usually begin any project with a lot more refined analysis to find the perfect size, which we’ll be going over in other tut series.

Should We Use a Grid System or Go Freestyle?

While there are lots of merits to using a pre-built grid system (like 960gs or 978gs), I’ve got a pretty clear vision of what I want to build, and not finding a grid system that will immediately accommodate my design, I’ve opted to freestyle this layout.

What are the repercussions of freestyling a layout? For one, we’ll have to be a lot more careful about the dimensions of each content module that we create because we won’t have guides telling us where things should go. To create a truly uniform looking template, we’ll just have to be that much more diligent about creating our own grid system that’s native to this template.

Drawing the Content Module

Draw the Rounded Rectangle: Now that we’ve decided on 994px by 644px as our container size, go ahead and draw a rounded rectangle of that size (using a 12px radius). Open up the Info panel (Window > Info or F8) to view the size of your rectangle as you draw it.

Note that the color of the rectangle doesn’t matter at this point. While we’ll eventually turn it white, for now we want to see it stand out from the background.

Creating the Shadow Effect: I’m going to use the same method we used in the “Create Your Own Juicy Tabbed Slider” tutorial because it’s the easiest way to get a shadow that will be easy to slice and turn into a transparent PNG when it’s time for coding.

To create this shadow, just grab your brush tool and set it to 60px in size and 0% hardness.

Then, create a new blank layer to draw on, hold down the Shift key to draw a straight line, and simply drag your cursor across about half of the container rectangle.

Finally, we’ll use the Free Transform tool (Cntrl + T) to angle it very slightly to create a bowing effect (I used about 2.5 for the angle). Why angle this at all? Because it’ll help create a bit of extra dimension if the light source appears to bow out a little bit.

Now let’s duplicate that brushed layer (Cntrl + J while selected on the layer) and flip it horizontally (Edit > Transform > Flip Horizontal). Slide the new flipped brush layer over until it just about matches up with the other side of the container rectangle. The result should a shadow that’s the opposite of the first one.

Move both shadow layers behind the “frame” layer and scale them (select both layers and press Ctrl+T) so that they fit just inside the total width of the frame rectangle.

Finally, merge both shadow layers together (Ctrl+E) and nudge the shadow layer into the right spot (use the basic selection tool [V] and use the keyboard to nudge). You can also adjust the opacity of the shadow layer to suit your own personal preferences. I used about 60%, you can do more or less according to what you’re after.

Bonus Step: To add even more depth, use the Perspective Transform on the shadow to make it appear to be going back in space. Just apply a small Gaussian Blur on the layer once you’ve transformed it to remove any pixel artifacts.

Here’s one more bonus step if you’re looking for even more drama: try creating a duplicate shadow layer that’s 70% smaller (use the Free Transform and the percentage scaling to adjust this), blurred out more, and at a different opacity (70%) to create a “core shadow” on the inside of the primary one.

Go ahead and name your shadow layers (once you’re done playing with them) and place them in a new layer folder called Shadows. Organization will make customization a lot easier when we’re ready to slice this up!

Creating the Background:

The background that we’re going to create is a subtle light blue “noise pattern“. I’ll go over this quickly, but to find out more about creating these patterns, check out our full blown tutorial on them here.

Start by creating a new blank layer and filling it in with white (Shift + F5).

Now let’s add some noise using Filter > Noise > Add Noise. You can adjust this to your own preferences, but I’ve used 14% for the amount.

Set the new “noise layer” to Multiple under the blending mode panel, and draw a rectangle (fill color #e1ebef) behind this layer.

Last, let’s add a New Adjustment Layer (Layer > New Adjustment Layer > Hue/Saturation) over these other two layers so that our noise isn’t boring old grey.

Under our adjustment layer’s Adjustment panel (Window > Adjustments), I used the settings of (Hue: 200, Sat: 100, and Lightness: +60) with the Colorize box checked. You can play around until you get your own desired effect.

Go ahead and place these three new layers (the adj. layer, the noise layer, and the background color layer) into a new layer folder called “Background Colors”.

[Checkpoint] : Setting the Container Box’s Color

Finally, let’s go ahead and make our container box’s color White now that we’ve added some background color. I’ve also added a light 1px stroke around our container box (#d8d8d8 in color) to help it stand out from the background.

At this point, your document should look something like this:

Your layers should also be organized like this:

Step 02: Creating the Navigation Sidebar

Now that we have our basic content container created and styled, it’s time to start filling it in with content. We’ll start with the Navigation Sidebar because that’s going to define how much space we have for content later on.

Creating the Sidebar Space

How Wide Should It Be? The width of the sidebar is really up to you… I’ve selected to use 235px as the width, because it can more or less fit the stuff that I want in there (plenty of room for long page titles, the social media widget, and a search bar). You can adjust this to suit your own needs though… and like I’ve been saying all along, this will all be adjustable from the CSS later on.

To start, simply draw a 1px line using the same color we used for our container’s border (#d8d8d8) along the vertical axis of the container. Place it about 285px from the left of the edge.

Next, it can be helpful to draw a guideline at this point – about 20px away from the edge of the container’s border. We’ll be using this as a guide for where to place all of our content so that things look uniform and well aligned.

The Logo

I won’t go into too much depth here because, well, you’re probably going to use your own logo . In short though, I’ve started with a simple frame icon (from the Noble set of icons), and added my own photo to the frame. Then I used the font Museo at 26pt; Using 2 different weights and colors to create some visual variety, I set the title of our template, “ShutterPress” nicely next to the icon.

Again, you’ll probably want to use your own logo (or a client’s) at this stage… so I’m going to skip over the layer styles and other tweaks. Feel free to check them out inside the demo PSD though!

Simply place the logo inside the sidebar space. Note that we’re using about the same amount of top-padding and right-padding that we used for the padding on the left side.

Little tricks like keeping the space around an object as important as the logo uniform is one of those things that will make the difference between good design and a great design.

The Accordion Navigation

The accordion navigation is the first functional element that we’ll be mocking up. As such, it’s worth noting that we’re going to enter some grey-area here. We want to mock this up as if it were being used… mainly so that if we show this to someone (like a developer), they’ll understand what it should look like at all possible interactive states.

As such, we want to show an active link, as well as at least one open accordion and one closed accordion.

I’ll use a simple font for this – Lucida Sans at 12pt with the leading set to 36pt with the off-black color of #252525. I happen to prefer using the Sharp anti-alias setting for web fonts in Photoshop mockups, but you can use whatever you’d like.

I’m also using a small variant for the active link: Bold with the color set to #0285da, which happens to mimic the logo as well as the background hue.

Use a few simple keyboard spaces to indent the links that will eventually become our accordion nested links.

Note that we’re using that same vertical guideline to hang the text so that it lines up nicely with the logo.

The 36pts of leading is plenty to set a simple horizontal line between each link, so let’s go ahead and do that at this point. Use the color #EAEAEA for these horizontal lines, which is slightly lighter than our primary border color. Why? It’ll help establish that these rules are slightly less fixed than the others.

Now let’s add the accordion buttons. Start by creating a 2px radius rounded rectangle sized at 11px by 11px. Add the following layer styles:

A light grey gradient (#E6E6E6 to white) from bottom to top, respectively.

A 1px Outside Stroke of #bfbfbf.

Duplicate that button layer, and add a simple text “+” and “-” to finalize the buttons. Place them as shown:

The Social Media Widget

From here on out, we’ll be using the same basic styling rules for all new elements. Borders should match the same grey’s that we’ve used before. The padding should also be about the same as we’ve used for previous elements. Font styles and colors will do likewise. As such, I won’t bore you with re-writing these notes, just keep them in mind!

For the Social Media Widget, go ahead and grab the icon set of your choosing (or check out our big roundup of icons sets here). We’ll be using 16px by 16px versions of whatever icon set you choose. The demo uses this set, but you can use whatever you’d like.

I’ve also opted to Desaturate the social icons (Image > Adjustments > Desaturate) so that they don’t distract from the core content area. Add the icons or your choosing (spaced out by a few px), and add in your “Social:” text so they have a title.

Add in our horizontal line borders for separation and leave a bit of space underneath for our search bar.

The Search Widget

The search widget is super easy to create. Just draw a 25px tall rounded rectangle (8px radius) with a 1px stroke of #e0e0e0 and drop in a magnifying glass icon. I used the one from the Fugue set of icons (it’s free), but you can use your own to add some style or flare.

Whallah! Our sidebar is now done. You can add your own custom widgets or leave it as it. It’s time to populate our content area with some, well, content!

Step 03: Creating the Grid Template

I’m going to do things a little bit backwards in these next two steps. Normally, you’d start a web-design with the homepage design… the page that people will first arrive at. However, this happens to be a rare case where the sub-page (ie: the gallery template) is arguably more important than the actual landing page.

So, knowing that I can always create a slick homepage design, I’m going to start our content design with the Gallery Template, because it poses more problems for us. Chief among these problems are:

• What size thumbnails we’ll use
• How to best space these thumbnails out
• How many thumbnail images we’d like to see per page
• How to address the problem of pagination in a fixed layout

The funny thing is that once we’ve solved these problems, we can actually create the homepage rather quickly. By starting here, we’ll allow ourselves the ability to create a killer thumbnail gallery without trying to meet any constraints that we might accidentally set upon ourselves by starting with the homepage.

Ok, let’s get started!

Creating the Content Space

I’m going to start by establishing a basic amount of padding that I’d like to always remain around the content area. In our case, I’ve selected 32px to be the amount. It’s a bit smaller than the line-height of the navigation, but not so small that things feel tight or constrained.

That leaves me with an active area of roughly 696px by 586px (again the height is flexible, so we’re not terribly concerned about that).

Finding the Perfect Thumbnail Size and Padding

With our active content area defined, now we want to select the ideal thumbnail size and padding. Figuring this out isn’t rocket science… I essentially just played around with several arrangements of crudely drawn rectangles until I found something that looked harmonious.

Now, I know the word harmonious isn’t very specific… so what do I mean? Knowing that I want to fit about 15-20 images per page, I tried our various thumbnail size/space combinations until I found one that reflected a good balance of positive and negative space as well as a refined sense of hierarchy. Things like the Golden Ratio play into this, but I’ll be honest and just admit that I eyeballed it in this particular case. There’s no magic going on here… just lots of experimenting.

So, what’s the final formula? A 155px wide by 125px tall thumbnail image, set into 4 columns (and in our case, 4 rows as well, which fills up our height).

The padding: There is about 21px of horizontal separation between each thumbnail and about 18px of vertical separation. Why the difference?

Because we’re dealing with a “landscape” layout (meaning that it’s more wide than it is narrow), it just feels right to maintain that same shape ratio across our entire design.

Notice how the final thumbnail size that I picked also reflects this landscape ratio. So, it makes sense that we leave a bit less padding between rows than we’ll place between columns.

Here’s the final outcome:

Note that I’ve left about 50px of space at the bottom to insert some sort of pagination (the way that users will navigate from one page of thumbnails to the next). Naturally, if there aren’t enough thumbnails to trigger the pagination, we’ll crop the layout in more closely at the bottom.

Adding Some Visual Styling

The visual styling of the thumbnails is important as well. Because we’re taking such care to create lots of little polish details across our entire design, seeing plain old image thumbnails with hard edges feels crude.

We’ll add some subtle styling to lighten this up and give our gallery grid a sense of refinement. Apply the following layer style to each of your thumbnail images:

A 2px Inner Stroke (in CSS terms, this will become padding) #EAEAEA

A 1px Drop Shadow (in CSS terms this will become the border) #F2F2F2

I’ll zoom in at 100% here to show you the final style:

Now that we’ve established our grid, let’s add some real images to give this layout some life:

Pagination

We’re almost done with this page… now all we need is a way for users to navigate from one page of thumbnails to the next. This is called pagination. There are lots of ways to do this (some more complex than others). In our case, we want a simple method of pagination… so I’m opting to use a simple left-arrow | right-arrow approach – ie: (<) and (>). This is one of the more intuitive methods of pagination, so it makes sense for our situation.

Let’s go ahead and create two 18px diameter circles:

Notice that I’ve simply copy/pasted the layer style from the accordion buttons that we used before. Why? Because duplicating visual styles helps ensure that our layout feels uniform… and there’s really no reason to waste effort on trying to design a completely new style. Consistent layer style usage will actually aid the usability of our site.

Once you’ve drawn your circles, add in the arrows (this is already shown above). In my case I used a custom > shape in Photoshop, but you can just as easily use a custom text “>” symbol. Since this isn’t a beginner tut, I’ll assume you can sort out how to get this shape in there somehow

Fin! That actually completes this content page. Using the same basic styles and padding rules that we’ve established, we can easily turn this into other grid layouts as well (such as a 2×2 grid, or a 3×3 grid).

Step 03: Creating the “Splash” Page Template

Alright – On to the final stage in the design session! We can probably sort out how to create various other support pages, but what we really need now is the homepage design. Being that this is a photographer targeted template, a photograph should obviously take center stage. We also need some descriptive text though (for a photographer to explain who he/she is, what kinds of services they offer, etc.)

Recycling Our Content Space

Width Considerations: In most circumstances we’d just copy over the active content space that we used in the Gallery Template. I’m going to switch things up a little bit by changing the padding from 32px to 20px. Why? This will give us just a little extra space to use a “FULL size” image. It’s a very subtle shift in the overall layout, but the impact should be enormous because we’ll be able to fit a massive image into the space.

Height Considerations: As we’ve been saying all along, the height is really variable and will ultimately be left up to individual users/designers/clients to determine just how much content you want on this page… in my case, I’m going to attempt to keep the dimensions of this page the same as our gallery page though.

The result of these considerations is an active space that’s slightly larger than what we used in the gallery template: 720px by 604px.

This makes sense for us for a few reasons: 1) it gives us plenty of space to design around and 2) it will fit inside most popular browsers’ “fold” space. So long as we don’t place any crucial information near the very bottom of this area, we should be fine to use this space in any way we might think up.

Creating the Image Slider

Drawing the Image: Begin by drawing a 716px wide by 438px tall rounded rectangle (Radius: 10px).

Apply the following layer styles, starting with a 2px Stroke:

And also add an inner shadow (which will help make our image “pop” more on the page):

The final visual style should look something like this:

Creating the Tabs:

The tabs will be the way that users will be able to cycle through images on the homepage. This is essentially just a basic jQuery carousel when you think of it in terms of coding… but there’s no reason to limit ourselves to the visual styles that most pre-built sliders will use by default.

So, let’s get a bit more creative with the left/right tabs by creating some visually interesting inner circles.

Start with a 92px diameter circle shape. Use Black for the fill color and set the opacity to 57%.

Use the Rectangle Marquee tool to make a selection that runs along our “image container” and use that selection to make a Layer Mask.

Now add the “<<" symbol using some basic text. I happened to use Lucida Sans at 42pt size. Use White for the color and add a simple outer glow:

So you should have this:

Go ahead and group these layers into a group, then duplicate it, flip the copied group horizontally, and slide it on over to the right side:

Now all you need to do is drag an image onto the rounded rectangle layer (make the image a Clipping Mask of that layer) so we can see what this will actually look like:

This is what your layer organization should look like (more or less).

Creating the Three Text Modules

Creating the Spaces: Determining the size of these spaces has as much to do with how much space we want between them as how much space we want them to take up. I want no less than 20px of separation between each module (to prevent them from looking jumbled up), so what we get is a module layout something like this:

In reality, these modules will appear more spread out than this because the text won’t be justified at the right side… so that’s plenty of room. Keep in mind these modules are invisible… or rather, there is no background color or anything like that. The image above is just to illustrate how I’ve arrived at my spacing.

Adding Titles: We’ll now add some titles for each text module. Position each title at the far left of the hidden rectangles that we created in the last step. In the demo, I’m going to use the font Museo for the titles… which happens to be the same as the logo font. Obviously, you’ll want to adjust the typeface to suit your own project. Here’s how the demo text is rendered:

Adding Descriptive Text: The descriptive text for each module comes next. We’ll use basic Lorem Ipsum script here, but you may want to use some actual text to test out the line height and font size that will work best for you. Here’s what the demo is rendered as:

Adding Image Icons: Finally, let’s add some 16px by 16px icons to add some visual interest to the modules. Remember to nudge over the titles as well:

And that’s it! Here are the final images that we created today. Click each one to view it full size:

End of Day 1: Review

At this point you should have spent about an hour or two setting up this document; Speed designers might have gone faster, but I’m allowing for some “creative time” where you might want to play around with different sizes and styles.

Advertise here

WordPress is big business. Thousands of web designers build for the popular platform that powers over 25 million blogs (which seems to be an outdated number considering February 2011 numbers suggest WP 3.0 has been downloaded more than 32.5 million times), according to it’s official site, including many high profile blogs as well as your current location, the Tuts+ network.

Evident through the success of authors at ThemeForest, custom theme design has a major market. The landscape for premium theme design (and development) is constantly changing, especially with the updated releases of the core software behind it.

The purpose of this article: In this article, we’re going to take a look at the latest WordPress trends as they relate to web designers. You may have never even touched the platform yourself; You may have used it before, just don’t know how to keep track of the latest developments; You might even hate WordPress and prefer another system like Drupal or Expression Engine… either way, it’s a platform that most web designers can’t afford to ignore because of it’s sheer popularity and mass adoption by the industry.

From a web design perspective, this article should help to bring to light a lot of the latest trends with custom themeing. Why is this important? With more and more sites being built on WordPress, it’s important to know what’s happening in terms of backend functionality, content management, and front-end design. Even if you never plan on writing a line of WordPress code in your entire life, having a good idea for what it’s capable of will help you create more intelligent designs for it (and there’s a very good chance that if you’re a web designer over the next year, you’ll be asked to create a site built on WordPress).

If you’re interested in finding out more about coding with WordPress, be sure to check out Nettuts massive archive of articles and tutorials on WP.

Ok. Enough intro, let’s dive in.

Why Should Web Designers Care About WordPress Right Now?

Brandon has promised a much larger article on this next month, but let’s break this down into three distinct reasons:

Reason 01: WordPress allows for a wide range of creative solutions. A few years ago, most web designers griped about CMS’s because of how damned ugly they all looked on the frontend. Sites built on old CMS’s looked like churned out templates: rigid layouts, ugly fonts, and a lack of flexibility for creating custom page designs. Nowadays, WordPress actually allows for just about as much creative freedom as you can possibly imagine. Just looking at a handful of the more eccentric themes out there should convince you that choosing to design for a CMS doesn’t mean giving up creativity in the design department:

Reason 02: WordPress empowers your clients. Chances are, if you’re a rockstar web designer, you probably don’t spend a lot of time creating custom content management systems (CMS’s) and database software. WordPress, along with a number of other awesome CMS’s that compete with it, is the best way for you to create a design, have it coded into a CMS, and allow your client to essentially manage his or her own site. For freelance web designers, this is revolutionary. No more late night calls for making content updates (ok, fewer of them); and less time spent training a client how to take care of their own site.

Reason 03: WordPress is popular. Sure, everyone loves to hate the popular kids in high school… but this is one case where popularity is actually very very important. Why? Because it means that you can pitch WordPress to clients (or your boss) and most of them will have at least heard of it. Most people savvy with the web will even have used it once or twice. This means less fighting over the platform, and more time spent actually designing. WP’s popularity also means that 1) it’s supported, tested, and stable by a huge community and 2) you can pitch projects to bigger clients simply because it’s stable enough to handle the likes of the biggest sites in the world. That means more potential $$$ for you as a designer.

What’s New: WordPress 3.0 and Above

The last year has seen the third major release of WordPress to 3.0, dubbed “Thelonious”. At the moment of publishing this article, the blogging software is on version number 3.1.1. As with each major release, this iteration introduced new features including a set of new features allowing users to customize themes with ease. From a premium theme designer/developer’s standpoint, this allows users to customize their themes with relative ease, especially important if selling on a large scale (such as at ThemeForest).

In previous releases, users who wanted to edit their theme would have to do the most through the bare code which requires a bit of knowledge. However, this could divert customers if they don’t have experience in this field. Luckily, the new features allows things like backgrounds and menus to be user-defined removing the need for end user coding.

Custom Headers & Backgrounds

WordPress 3.0 added new dashboard features that allowed an end user to upload backgrounds and headers to rebrand themes. WordPress’ own theme, Twenty Ten, demonstrates the ease of uploading a custom image for the homepage.

This is a great feature to implement to lure potential buyers. Boasting easy rebranding methods can help to convince buyers and clients with little to no back-end knowledge.

Menu Managment

WordPress 3.0 introduces a new dashboard-centric menu management system with a simple drag-and-drop interface. For a long time, menus would either need to consist purely of tags and/or categories or be hardlinked and only editable if you ventured into one of the theme’s files. This could be a pain to edit and all hell would break loose should you accidentally delete the ending of a tag or a vital part to your theme’s successful execution.

The latest from WordPress allows users to customize their own menus within the WordPress dashboard. It also means that, from a developer’s perspective, theme customization is a lot easier as one doesn’t need to develop a theme options page. Instead, they only need to add a few extra lines to enable the dashboard-located options pages which integrates an easy system to use – one that might pull buyers back for a second purchasing round.

Custom Post Types

I’ve always been a big fan of Tumblr and currently run my own blog off their platform. I find it a pleasing and simple blogging software and love the various post types such as image, text and quote posts. The simplicity is superb! WordPress introduced a similar feature in 3.0 that would allow different post types to be styled individually and not all through a generic text-oriented template.

This really opens the floodgates for a bunch of new and unique themes, especially since custom post types are not “enabled”, they are created and are dependent on the theme’s aim. This development means WordPress is much more of a CMS now, rather than just a simple blogging software. For example, one could use a custom video post type to launch a video-centric blog. Or, imagine you ran a technology blog, it’s going to be a lot easier to use custom post types so you have alternative views for both content and reviews. It’s a really interesting prospect for customers and it’s all built into the familar WordPress dashboard.

Already, WordPress theme designers are taking advantage of the new features and this can be seen on the selection of ThemeForest themes who advertise this as a main feature.

Continuing Marketplace Success

Premium theme marketplaces continue to grow at a rapid rate. Envato, this site’s parent company, also operate one of the (if not the) most popular premium theme marketplaces clocking over 960 WordPress themes that range in price from $12 to $45 for non-framework themes. The success of these themes are unprecedented with some individual ones reaching an unbelieveable $197,470 (that number is based on regular license price multipled by sales number. I haven’t factor in extended licenses!) in sales at the time of this writing. That’s one theme!

There’s clearly a nice market for these low-cost themes. New themes that were released a matter of days ago can instantly reach hundreds of dollars in sales and continue to grow by the day. As the marketplace grows, so does the opportunities for indie developers to grab some of the cash. Marketplaces like ThemeForest allow smaller developers to be put in front of a big audience when they wouldn’t have a chance otherwise.

As many people’s lives become dependent on the success of WordPress, this offers some free marketing for the blogging software. I am more of a design type and do little development away from WordPress and when I talked with a potential client today, I tried to convince him to move the WordPress way. In a way, I was offering some free marketing by trying to push a fairly popular blog onto a new platform. With the increasing developer-base for WordPress, more and more bloggers are being introduced to the software, fueling and demanding it’s growth.

Themes Are No Longer Just Designs

A trend that keeps rising is tagged-on functionality to themes. When WordPress first started out, themes were just designs that styled the appearance of a WordPress blog. Now, premium themes come with custom shortcodes, plugins and all sorts of add-ons that change WordPress’ functionality and not just it’s appearance.

As you peruse ThemeForest’s selection of themes, it’s unusual to frequent many themes that don’t advertise additional WordPress shortcodes or custom forms or sliders built-in. When a buyer purchases your theme, they’re buying into an “experience” that combines both appearance and function.

And in return, the custom plugin market is growing. Initially it was just themes that were mass-sold, but now CodeCanyon is home to a thriving custom plugin market where files are turning over more than individual themes!

Final Thoughts

The key line to take away from this article is that, as WordPress grows, so does a major industry. As the developers of the world’s most popular blogging software introduce new features, a theme designer’s proposal becomes so much more attractive. In it’s current state, a theme is a simple plug-in and play proposition that adds a styling and function to WordPress. And it’s now easier than ever for end users to customize the themes.

So as a blogger, I just want to say: keep designing and keep fueling the development of the world’s biggest blogging platform.

If you’re interested in finding out more about coding with WordPress, be sure to check out Nettuts massive archive of articles and tutorials on WP.

This release addresses a vulnerability that allowed Contributor-level users to improperly publish posts.

The issue was discovered by a member of our security team, WordPress developer Andrew Nacin, with Benjamin Balter.

We suggest you update to 3.1.2 promptly, especially if you allow users to register as contributors or if you have untrusted users. This release also fixes a few bugs that missed the boat for version 3.1.1.

Download 3.1.2 or update automatically from the Dashboard → Updates menu in your site’s admin area.

Technical Marketing Tip

Reserving a domain name for your blog

Advertise here

It’s April, and nearly the turn of the month. What does that mean? Another ThemeForest roundup of course! This is our curated list of what’s been going on at one of the world’s most popular premium theme marketplaces that also points out our favourite themes and web elements from the past month.

Featured Author

This month’s featured author is revaxarts. Revaxarts’ portfolio consists of only five files on ThemeForest, but has helped the Austrian web desginer reach over 600 sales, earning him a black paw. His most popular file is a beautiful under construction page that has sold over 210 times at it’s $5(+2) price tag.

Revaxarts is also known for his The Documenter and Envatitor scripts which help other ThemeForest designers in various causes.

Featured New Author

web_gab is a team of one, a graphic designer named Gabriel Ciprian. Whilst he’s been signed up onto the Envato marketplaces since October of 2009, his first theme only went up late last month. FreshIdeas is a CSS template that includes a Facebook FBML template all within it’s $12(+2) price tag.

Free File of March

OverALL is this month’s free file of the month, the one file on ThemeForest you can download without charge for one month only (and as the end of the month is arriving soon, you better be quick!).

OverALL is an HTML/CSS template that features a drop-down menu, working contact form and slider. The theme also includes twenty shortcodes, Cufon text replacement and five different color options. You should also take note of the integrated gallery with video support.

The Best of ThemeForest…

As with each month, there’s been some great themes in April! I’ve picked out my personal favourite files that were published in April alone but be sure to share yours in the comments.

Mazine

Mazine is a WordPress theme featuring a minimalist white background and beautiful serif typography. As an e-commerce theme on WordPress it includes a functional plugin as well as contact and newsletter ones. Starting at only $35, it’s an attractive proposition to anyone starting out their online store on WordPress.

Geometric

I once went through a phase where I designed everything from websites to desktop publishing in a bold, white/black contrast with bold fonts like Impact. Geometric has a similar style featuring an inversable white/black color scheme and customizable backgrounds. Like Mazine, it also features multiple plugins and modules. Unfortunately, however, this is a Joomla-only theme but I hope the developer, marbol2, is planning a WordPress theme because it’s one i’d snatch up!

Vendor

Vendor is an elegant WordPress theme that’s perfect for product (or application) marketing. In fact, it’s so nice, it’d probably make our application promo site roundup.

Livepuse

Livepuse is a portfolio theme for photographers. The beautiful template comes in four color varieties with four beautiful sliders. Livepulse has gained 24 sales in just four days on ThemeForest.

Freshfolio

NewsMagazine24 boasts a minimalist color scheme for it’s news WordPress theme. The theme, available starting at only $35, includes a multi-level drop down menu, built-in related posts and built-in social sharing. In only four days on ThemeForest, it had already garnered 19 sales.

Grace

Grace is another beautiful photographers with some awesome Ajax effects. If you want a photo-centric design, this could be the one you want, especially if you’re on a budget of only $13! As it’s a fairly unique theme, there’s multiple layouts and templates that come with the theme and there’s even an iPhone theme included at the low, low price!

Plus over 3,700 more…

As always, ThemeForest hosts thousands of great themes. Marrying a great review team with stringent quality guidelines, pretty much every file on ThemeForest is great and you should be sure to check out the wide selection available.

Across the Marketplaces…

ThemeForest is Envato’s web design marketplace, however it’s sister catalogues also feature some great web elements to use as part of, or aside, web templates.

Web Elements Pack

The Web Elements Pack features a bunch of beautiful web elements (naturally!). The pack includes six different color schemes for it’s $5 price tag.

Ultimate Button Pack

Ultimate Button Package includes a bunch of attractive buttons in 10 PSDs, all for $7.

CCGallery

CC Gallery is an amazing HTML5 gallery for images, videos and audio files. The stunning file executes amazingly well, just like coverflow within iTunes.

The Month at ThemeForest

Unnamed user hits $40k/month in marketplace sales

ThemeForest rockstar Kresi has, in the past, mentioned his $30k/month earnings on the premium themes marketplace, but another user has surpassed him. We can’t tell who it is, but the Envato Notes blog mentions the user garnered over forty-thousand American dollars in sales in one month, a new marketplace record. The blog post doesn’t indicate whether this is sales or post-commisions earnings, but even half that is still an amazing feat for any user and definately enough to live off!

April 16: WordCamp Seattle in Seattle, WA. This weekend! After taking a year off, WordCamp Seattle is back with tracks for bloggers, designers, and developers. This year they’ll feature a lineup including presentations by both local speakers and visitors like core committer Andrew Nacin, as well as an Ignite session of lightning talks at the end of the day.

May 5: WordCamp Vancouver (Developer Edition) in Vancouver, BC. This one-day WordCamp is aimed purely at developers working on the WordPress platform, and will not have content aimed at bloggers (as previous Vancouver WordCamps have). I predict we will start seeing more of these types of niche WordCamps moving forward, because they will mean smaller, more intimate events that allow more collaboration (and make it easier to find venues!). Note that we’re working with the organizers to get the tickets to a more reasonable price, so keep your eyes open this week if you’ve held off on buying a ticket because of the price tag.

May 7: WordCamp Switzerland in Brugg, Switzerland. This one will cover a wide range of topics, including getting started with WordPress, advanced development topics, BuddyPress, and an inside look at running a WordPress-based business.

May 14: WordCamp Orange County in Orange, CA. Already sold out! Orange County had their first WordCamp last year, and the organizers have put together another great event this time around.

May 14: WordCamp Paris in Paris, France. One of the last true unconference-style WordCamps, the Paris group will plan their schedule the morning of the event like they do at BarCamps. WordCamp Paris had one of the best WordCamp t-shirts ever a couple of years ago. And it’s in Paris in the spring.

May 21–22: WordCamp Raleigh in Raleigh, NC. Repeat organizers from the Raleigh WordPress Meetup Group are just starting to select speakers and put together their plans, but if it is anything like last year, the venue will be packed with WordPress professionals (and maybe there will be cookies). I’ll be attending this one, as will Nacin.

June 4–5: WordCamp Reno-Lake Tahoe in Reno, NV. Organized by a WordPress core UI group contributor, WordCamp Reno-Lake Tahoe is taking place in Reno and has a packed schedule full of visiting experts.

June 11–12: WordCamp Kansas City in Overland Park, KS. With publisher, designer, and developer tracks, Kansas City’s WordCamp will have a little something for everyone, presented in large part by local speakers.

June 17–19: WordCamp Columbus in Columbus, OH. WordCamp Columbus has a new organizer this year and is bringing the focus more firmly onto WordPress (and less on social media). Their 3-day event includes an entire day for newbies, and another for non-profits, a nice addition to the usual blogger/developer tracks.

July 9–10: WordCamp Montreal in Montreal, Quebec. This group consistently puts on a great every year. If you register now, you can still get a $10 discount and get both days for only $30 (with sessions in both English and French to reflect the bilingual nature of the city). Montreal plays host to a number of festivals throughout the year, and this weekend is no different, including festivals for the arts, comedy, tango, and even circus arts.

July 16: WordCamp San Diego in San Diego, CA. First WordCamp in San Diego! They have talking about this for over a year, and are now starting to really ramp up the planning. They’re finalizing their venue right now, and I would expect a great roster of speakers.

July 16-17: WordCamp Portsmouth in Portsmouth, UK. The annual WordCamp UK that moves from city to city each year alights this year in Portsmouth. This one is notable because Mike Little, co-founder of WordPress, is part of the organizing team.

July 23–24: WordCamp Boston in Boston, MA. Another one just about to lock down some details and get starting with speaker selection, etc. An easy train ride from so many places, and not in the middle of winter this year!

July 30-31: WordCamp Chicago has new organizers and is a new venue this year. A call for speakers, supporters, and volunteers will likely be posted sometime next week.

WordCamp Portland is looking for a venue before deciding on a date this year, as it has outgrown the space it’s used the past two years, but hopes to happen in September. If you would be interested in donating a venue to this popular event, please contact them.

We’ll hold off on posting fall events until later in the summer since there a lot in the planning stages now. To get the most up-to-date information, visit WordCamp Central.

Hope to see you at a WordCamp soon!

• Some security hardening to media uploads
• Performance improvements
• Fixes for IIS6 support
• Fixes for taxonomy and PATHINFO (/index.php/) permalinks
• Fixes for various query and taxonomy edge cases that caused some plugin compatibility issues

Version 3.1.1 also addresses three security issues discovered by WordPress core developers Jon Cave and Peter Westwood, of our security team. The first hardens CSRF prevention in the media uploader. The second avoids a PHP crash in certain environments when handling devilishly devised links in comments, and the third addresses an XSS flaw.

We suggest you update to 3.1.1 promptly. Download 3.1.1 or update automatically from the Dashboard → Updates menu in your site’s admin area.

Our release haiku:

Only the geeks know
What half this stuff even means
Don’t worry — update

GSoC Logistics:

• 175 mentoring organizations (including WordPress)
• Highly competitive and prestigious program (in 2010, 5539 proposals were submitted by 3464 students, and 1026 were accepted)
• You must be enrolled in an accredited college/university
• Coding period is May-August
• Successful completion of project = $5,000
• GSoC FAQ answers all your questions

WordPress logistics:

• Mentors include WordPress core developers, plugin authors (including BuddyPress and bbPress), mobile app developers, and WordPress professionals.
• Projects are limited only by your imagination and ability.
• Previous GSoC students have gained responsible roles in WordPress core development, like Dion Hulse and Andrew Nacin (core committers), and Daryl Koopersmith (wrote the internal linking feature in 3.1 and much of the custom menus feature in 3.0).
• This year, in addition to accepting project proposals for the main WordPress web app, we’re also encouraging applications for projects with the WordPress mobile apps (iOS, Android, Blackberry, Nokia, Windows Phone 7), for community-developed plugins like BuddyPress and bbPress, and even standalone plugins that could become community projects. Check out our Codex page on GSoC 2011 for some ideas to get you thinking.
• Last year we mentored 15 students, and hope to take on about the same number this year.

If you’re a college student/developer, we encourage you to apply. If you’re a professor or a teacher of graduating high school seniors, encourage your students! If you just want to help us spread the word, download the WordPress GSoC flyer and post it on campus bulletin boards in your town. Remember, April 8 is the deadline to apply!

Featured Author

This month’s featured author is obox. Obox is ran by two brothers, David and Marc Perel, who work together with one designing and one developing. Their portfolio of eleven themes has amassed 156 sales (at the time of writing) earning them a red paw. The South African pair have also gained 40 followers since their January 2011 joining date.

Featured New Author

DMThemes is quite a ThemeForest phenomonon who launched their only theme, CircloSquero, at the end of February. Less than a month later and it’s already been sold over 600 times and have a solid four-star rating. Considering this has been done in far less than a month is an amazing feat for the duo followed by 84 users.

Free File of March

PHOTOME is this month’s free file of the month, the one file on ThemeForest you can download without charge for one month only.

PHOTOME is a photography portfolio template that comes in two flavours of wood. This version is a static site template, but a WordPress version is also available from the same author. The integrated AJAX slider looks great and works unsurprisingly well with the dark wood background. Be sure to grab it before thr turn of the month!

The Best of ThemeForest…

March has seen some great new themes available on ThemeForest and this roundup recognises the great work that designers and developers alike have put into the marketplace. In compiling this list, i’ve tried to pick out some of the most unique additions to the marketplace but, if you have any personal favourites, be sure to share them in the comments section of this post.

Minerva

Minerva is a minimalist business template designed with product promotion in mind. The package you’ll get for your $22 payment is a 19-page, valid XHTML site with PSD and a working contact form included.

ANAN

ANAN is a photography theme that’s typography is just stunning! The body of ANAN’s theme is a large image and there’s multiple page templates which lays content out in alternative views. This file also has some text templates for individual gallery pages. The $37 price tag for this file is a huge bargain, in my eyes.

Qloud Landing Page

Qloud is a landing page for, what seems to be, software promotion. Qloud has an attractive range of typography, and – since it’s a marketing site – conforms to many design principles including the Z-layout.

Coverage

Coverage is a WordPress theme that markets itself as a “unique portfolio theme”. The theme taeks advantage of some wordPress 3.1 features including the WP3 menu system.

Freshfolio

Freshfolio is an curvy, horizontal, HTML theme aimed at [guess what], portfolio designs. If the theme’s not attractive enough, the $14 price tag will be!

LooseLeaf

Looseleaf is a “woodsy, natural” theme that’s surprisingly attractive. Head over to the theme demo and check out the page demos. The container breaks for the titles really complement the natural style.

Plus over 3,600 more…

As always, ThemeForest hosts thousands of great themes. Marrying a great review team with stringent quality guidelines, pretty much every file on ThemeForest is great and you should be sure to check out the wide selection available.

Across the Marketplaces…

ThemeForest is Envato’s web design marketplace, however it’s sister catalogues also feature some great web elements to use as part of, or aside, web templates.

UI Elements for Web UX Mockups

These UI elements demonstrate a beautiful set of professional buttons, sliders and icons.

Pricer Pricing Grid

Pricer is a CSS3 pricing grid available in three colour styles and is totally devoid of images or javascript. The file is cross-browser compatabily (including Internet Explorer 7 and up) and supports animation on some browsers.

Stiched Green Buttons

These buttons are an attractive set of green buttons with a nice, stiched effect on the ribbons. These are some of the best buttons i’ve come across this month and, if the green turns you off, it’s incredibly easy to change the colour which just makes the whole package even better.

WordPress Ken Burns Slideshow

WordPress Ken Burns slideshow is a plugin for the popular blogging platform that generates a pan-and-zoom effect on a gallery of photos. This is not all, however. There’s also an semi-transparent overlay with text. The only connotation is it’s Adobe Flash roots causing some incompatabilities.

The Month at ThemeForest

ThemeForest Drops IE7 Compatability

ThemeForest staff announced it has dropped the Internet Explorer 7 compatability requirement for new themes due to it’s decreasing market share and the recent IE9 release. However, IE 9 compatability will not be a requirement until a few months down the line once authors have familiarised themselves with Microsoft’s critically-aclaimed, new release.

RevaxArts launches The Documenter

Ever feel the pain of writing out documentation for your new ThemeFores themes? RevaxArts has launched a new, web-based service to spice up the documentation process to create an attractive file. The service itself is very simple and free to use so be sure to check it out (and, if you want, offer Xaver a donation to thank him for your legion of satisifed buyers).

Developer Changes

Finally, let’s go behind the scenes and note that there’s been some changes in the marketplace’s development teams. Whilst this may not directly affect your purchasing or creation on the various sites, you may be interested to know. Firstly, new developers have been added to the marketplace teams in the form of Mark and Chendo. On a sadder note, developer John writes on the forums:

On a sadder note, we’ve got a couple of departures: Glen from the marketplace team finished up with us a couple of weeks ago, and Fred who did a lot of work taking care of creattica and freelanceswitch is wrapping up today.

I’m sure you’ll all wish those the best and look forward to another month of ThemeForest (and another roundup at the end of it!).