We’re so excited to team up with Media Lab to be able to offer their new product – SG3xpress to Onextrapixel’s readers. This new product enables you to convert Photoshop designs to WordPress themes and fully functional blogs.
Whether you’re designing a website, a blog, or a WordPress theme, Media Lab’s SiteGrinder plugin for Photoshop can give you a leg up on the competition by saving you time and money and by letting you give your clients exactly what they want. What you see in Photoshop is what you get in the web browser.
There are other ways to get from Photoshop to a web page:
- You can dig around in HTML and CSS code.
- You can slice up your file into a bunch of individual graphics and reassemble them in a program like Dreamweaver.
- You can even pay someone else to do the conversion for you.
But at Media Lab, the best way to go is to let SiteGrinder use the information in your Photoshop file and do the work for you.
How Does It Work?
There are three steps to creating a WordPress theme with Photoshop and SiteGrinder:
- Design the site in Photoshop, naming the layer, layer groups, and layer comps with special “
hints” in the name, like “
-button” or “
- Customize CSS settings for text, links, backgrounds, borders, shadows and more in the SiteGrinder Design Manager.
- Deploy your WordPress theme and install it in your WordPress dashboard.
Let’s take a closer look.
Working in Photoshop
Just as with most design projects, when you’re creating a website or a WordPress theme, your work begins in Photoshop. It’s here that you design your site and assign hints to the layer names. With the SiteGrinder Advanced Blogs and WordPress themes there are two different ways to create the page design:
1. As a Quickblog
You can add “
-quickblog” to the name of a Photoshop layer to build an entire blog in one step. Just create a rectangular text or graphic layer somewhere on the page, and apply the quickblog hint to the layer name. If you use a graphic layer to create your blog, SiteGrinder applies default font settings to the blog elements. If you use a text layer, you can put arbitrary text in the layer and SiteGrinder will use the font face, size, and color settings to create the default font for your blog. You can have any other text and image layers you want on the page, outside of the quickblog layer.
2. As a Free-Form Blog
-single layers as well as
-blogdata layers you can use blogdata identifiers to manually arrange the elements of your blog on the page, giving you ultimate flexibility and control over the design of your WordPress theme. You can use these elements instead of a quickblog layer or in conjunction with a quickblog layer, to customize every part of your blog or only certain parts.
Whether you’re creating a quickblog or a free-form blog, you can also add any other visual elements to the page that you desire.
The Design Phase in SiteGrinder
Once you create your design and name your layers, open SiteGrinder 3 from the Photoshop File > Automate menu. When the SG3xpress plug-in opens, you can review any errors and warnings in the report that SiteGrinder provides, and set image compression as desired.
When you click build in the Build and Deploy panel, the SiteGrinder design manager will open and you can view your page in the web browser.
When you get into the Design Manager, you’ll see that there’s a new section here: blog appearance. It’s here that you can configure CSS text styles, buttons, forms, and other special blog-related elements.
On the web page itself in the main part of the browser window you will see a blog based on the blog layers you created in Photoshop. The blog will already be filled out with sample posts and comments so you can see what your blog appearance settings will look like once your blog has content in it. This is just preview content and will not appear in your final blog.
You can go back and forth between Photoshop, SiteGrinder and the Design Manager as needed until your design is complete. Then you are ready to deploy your theme.
Deploying the WordPress Theme
For WordPress Themes, you simply deploy as a “WordPress Theme”, upload the files to your web server with a separate FTP program, and configure the rest of your blog options and content in WordPress.
Create a new site in the SiteGrinder plugin window, and select WordPress Theme for the type of CMS.
Deploy your theme to a folder on your computer then upload your theme to your web server’s WordPress themes folder using an FTP program such as Fetch or CuteFTP. After you’ve uploaded your theme files, log into the WordPress administration page on your server and apply the theme to a new or existing blog using the WordPress controls.
If you have WordPress installed on your computer you can test the theme there by placing the theme files in the WP themes folder.
You can include any visual elements you like in your own website, blog, or WordPress theme. Check out this Photoshop sample and click the image to see a WordPress blog using this theme.
If you want to know more, try out the free trial version of SiteGrinder and SG3xpress.
3 x SG3xpress Photoshop Plug-ins from Media Lab Up for Grabs!
For a chance to win one of 3 SG3xpress Photoshop plug-ins from Media Lab – all you have to do is post a comment below and tell us why you would like to win this. Winners will be chosen randomly from the comments. Please enter a valid email address.
The competition will be open until this Saturday, 23rd April 2011. Winners will be announced on this article and will be contacted via email.
Here Are The 3 Lucky Winners
We are glad to announce the 3 lucky winners for the Photoshop Plug-in giveaway. They are:
- Penny Laporte
Winners will be contacted through email soon. If you are one of them and have not received an email from us or our sponsor by next week, please contact us.
Thank you for all your support. For sure, we will be organising more giveaway contest so everyone will have a chance to win, stay tuned!