About Me ColorJoy Home Page Free Stuff About Me Contact Me
ColorJoy Home Page
ColorJoy Home The ColorJoy Blog Buy Patterns, Recipe Books, CDs Patterns Schedule & Potential Classes Recipes & Food Information The LynnH SockTour LynnH Polymer Clay The Fabulous Heftones - Lynn & Brian

Archive for April 27th, 2011

SG3xpress for WordPress Blog Tour!

Wednesday, April 27th, 2011

I feel very lucky. Recently I’ve been gifted with several opportunities and products, which sort of “fell from the sky” into my life.

I’ve wanted to update the look and function of my weblog for a long while. I’ve had the blog since November 2002, and it has had only two “looks.” The last time I spent any time on the site itself was in late 2007 when I put up my shopping cart. I’m still not in love with that, but it took SO much work to set up I’ve been living with it.

My blog, though, is the page where more people visit me than any other. I want it to reflect my energy, and I think it does not express that as fully as it could.

I first accessed the web back when some web browsers could not display images at all. At the time, America Online/AOL was one of the most popular ways for folks to get online. The AOL system could only show .GIF formatted images. It could not show (what are now standard) .JPG/.JPEG images, and there was no hope for the newer-technology .PNG images most computers easily display these days.

In 1995, I was one of the few women I knew who was using the internet. In my day job, I was training corporate students to surf the internet and use email, which were very new subjects in a business setting. I had to write some of my own materials to teach the classes.

My first web page came about when Brian and I went on a trip to Mexico. I started to write a letter to friends about the trip.

The letter came out to 20 pages. This was too much for a paper letter, too much even for an article in a magazine, and not long enough for a book.

I was stumped as to how to share my story. Brian suggested I break it into chunks and put up a Mexican Travelogue web page (he was already making web pages at that time).

The below photo was part of that first web page. It is a .GIF image, saved in all capital letters on my Windows 3.1 computer because it could not save any other way. (The person at right, white shirt  and hat, is Brian halfway up the main pyramid at Chichen Itza. This pyramid is no longer open to climbing, and we were lucky to both climb to the top that day. Interesting note, the line up the middle of the stairs is a metal chain which one could use as a support/handrail.)

Making a web page at that time really required coding HTML from scratch. Word for Windows said they had a feature which would save documents as web pages. I knew Word very well. I tried the feature and it was sadly lacking. I knuckled down and learned to program in HTML.

Fast forward to 2002. I started my first blog in one software program, and several years later I switched over to WordPress to handle the complex coding needed for archives, searches and the like.

WordPress uses templates coded in something called CSS which is something somewhat related to HTML but much more complex. I clunked around in it, making changes and looking at what changed after I tweaked. I found a look I could live with and never touched it again.

Then online/knitting friend Donna Druchunas (author of Arctic Lace) asked if I wanted to be a test site for the new SiteGrinder Express product she works with. This program lets you set up a multi-layered Photoshop document which then is converted into a WordPress template (which makes the site look pretty and navigate well). SiteGrinder Express installs as a plugin for PhotoShop, an easy process.

I’ve been using PhotoShop since version 3, which I am pretty sure I ran in Windows 95. At first I used it for simple web photos, but in recent years I make multi-layered image documents for advertisements and the like. One of my recent efforts was this ad for my new Colorama Crescent Shawl. (I ended up using another image for the actual paid placement.)

I have had an intense over-scheduled month or two and am now very excited to have time to learn this product. I’m excited by the possibilities for the blog area of my site.

I asked Donna to write a bit about what the SiteGrinder Express PhotoShop plugin product could do for others who have WordPress blogs. I’m happy to share her input here today.

Hi Lynn, thanks so much for being part of the virtual roadshow to celebrate the release of the SG3xpress Photoshop plugin from Media Lab.

We’re very excited to have this new product that can convert files PSD to WordPress themes, and even to stand-alone blogs, from inside of Photoshop. Since I know your blog is not about technology, but about artful living, I’m going to take this opportunity to present a very basic introduction to SG3xpress. There are so many creative people who blog! Fiber artists, designers, writers, painters, illustrators, musicians — you name it.

Those of us who are creative just have a drive to share what we create with the world. And many of us use our blogs to do that. But I know that many right-brain oriented artists feel uncomfortable getting into the left-brain logical side of creating a website or blog. We may have lots of fun coming up with beautiful designs in our sketchpads and even in Photoshop, but when it comes to writing code to move our creations over into the world of technology, we’d probably rather be doing our taxes.

The whole purpose of SG3xpress is to allow artists and designers to do almost all of the work of creating a website in Photoshop. The grunt work is done by our software product, and you just use the way you name and group your layers in Photoshop to tell SG3xpress which layers are buttons, menus, blog posts, and so forth.

Let’s take a look inside a Photoshop file and see how it’s set up, starting from the bottom of the layers list.

See that layer called “browser-background”? Guess what that is? You’ve got it, the page background for the blog webpage in the browser. It’s got Layer Style of a Pattern Overlay applied to it that creates the tiled dark-grey wood-grain background that you see (click for larger image).

The next layer is called “this-quickblog”. Guess what this is? it’s the layer that creates the whole blog, including the posts, comments, next and previous post links, the add-comment form, and so on. Although SG3xpress lets you build a blog element by element, using the quickblog layer is much easier.

You just create a new layer, make a colored rectangle in it, and add “-quickblog” to the end of the layer’s name. The color you put in this rectangle won’t show up on your blog. It just shows you where the blog posts will be on the web page. You can customize the color of the posts, and even add borders and shadows, later on in SG3xpress.

Next up are two layers called “title divider” and “blog title-text”. The title divider is an image layer that has the white line below the blog’s title. This layer will be made into a JPG, GIF, or PNG file by SG3xpress. The title itself is a type layer. Because it has “-text” at the end of the layer name, SG3xpress knows that this layer will be text in the web browser, not a JPG, GIF, or PNG file.

Above the blog title layers, you’ll see a layer group called sidebar stuff. Inside this group are a couple of graphics lines and these layers, which will be used by WordPress:

“this-wp-sidebar” tells WordPress where the blog sidebar will be on the page
“this-wp-widget” tells WordPress how to design the widgets such as the calendar, search box, and so forth, that you can set up for every WordPress blog
“widg-title-blogdata” sets the font for the widget titles in the WordPress theme
“widg-con-blogdata” sets the font for the widget content in the theme

Next up are two layer groups with “-button” at the end of the layer names. Guess what? These will be buttons with links! A button can be made out of a single image layer, a single type layer, or several different layers combined together into one Photoshop layer group.

The two top layers in the Photoshop layers palette are called “Menu 1-menutree-wp” and “top-menutre-wp”. I bet by now you can guess what these do. They set the style for the WordPress menu tree. The layer called “top-menutree-wp” sets the style for the menu items that will go across the page. “Menu 1-menutree-wp” sets the style for the submenus. Because the beginning of the name matches one of the text items in the top menu, this submenu will be used in conjunction with the top menu for the blog.

I hope that gives you a good idea about what it takes to design your blog or WordPress theme inside Photoshop. It almost all comes down to how you name your layers, something that almost every Photoshop user knows how to do.

There are a few more steps, and you can watch some videos about the rest of the process on our website , and follow along on our blog to learn more during the rest of our roadshow. Here’s an overview:

1) Select File > Automate > SiteGrinder 3 from Photoshop’s menu. SiteGrinder will open and the first thing you’ll see is a report where SiteGrinder will let you know if it found any mistakes in the way you’ve named or grouped your layers. Isn’t that nice? It’s one of my favorite parts of the process because I don’t have to build the blog and then find out I made a mistake. (It’s kind of like having someone make a gauge swatch for you.)

2) Build the page(s) in SiteGrinder. This opens up a web browser so you can see what your page will look like. Here you can make selections from menus to customize the CSS styles for your blog, such as changing the color of links when you click on them, and so forth.

3) Deploy your WordPress theme. This saves the finished files to your hard drive and you’re ready to install them into WordPress.

That’s it. On our next roadshow stop we’ll look into these later steps in more detail, so follow along on our blog so you don’t miss anything. I hope you found this interesting and informative. Thanks again for being a part of our roadshow!

Media Lab, Donna
aka Donna Druchunas
Author of Successful Lace Knitting and other knitting books

I have been clunking around in SiteGrinder for about a week. I have a bit of an idea of where I want to go, and am doing a learning curve on the specific features of SiteGrinder. I think this is going to be fun, but there is no escaping the learning phase of anything.

The part I realize now, is that one must first have a clear idea of what they want something to look like before one can begin. Funny how that goes!

Side note: I had to update my version of WordPress (my blogging program) in order to make SiteGrinder work. In the process, I’ve added a few new functions to the blog already. The new comment system allows you to have a conversation with other commenters. If you don’t want to register for a new username/password for the Disqus comment system, you can just be a Guest.

I’ve decided that now I have a little of an idea of the new “look” I’m going for in my pages, I’m going to do an intermediate change. While plugging around in SiteGrinder I made a “header” image for my site which feels more like the LynnH I know to be me. I’m going to plug in that top image for now, just changing one inch of the top of all of my pages.

Here is the “before” version of my header image:

Here is what I think the top of the blog will look like soon, while I work on a complete SiteGrinder update (I am still working on the text colors, working on readability):

Meanwhile, I’m tooling around in this clever SiteGrinder Express program. I want to see what I can do to make the whole site look more like what you might find here. I also aim to make it more comfortable for you to navigate around the site.

Here is what my PhotoShop screen looks like right now:

I am a long way from done. I need to be sure you can read the words I write, so I’m considering a white column where the dark purple one is, with the same purple text I use now. I’m learning how to make the menus work properly. I expect it will look a good deal different than this when it actually functions on my site.

I am having fun with the ideas in my head. Of course, finding out how to make them play out in real life is a constant learning curve for an artist, no matter if it’s knitting a sweater or working in a new computer system.

I’ll come back with a wrap up when I get things tucked into bed properly. Stay tuned!