I made the last one basically because I have an impulse to change my layout roughly once every year (or two). I was suckered into the whole pop-out style that was going around at the time, and I wanted my piece of the action. As a side-effect, The site sort of fell on its ass when certain browsers hit it. I had already given up on the layout before I had even really finished it.

That’s always a good sign.

First off, you may have noticed that the site has a bit more… character to it. I think this layout is a bit more me. At the very least, it gives viewers a brief glimpse into the borderline insanity that is my mind. I’ve removed my resume from the site, since no one actually cares about that. I’ve split the site – quite literally – down the middle. To the left are my ramblings for your continued enjoyment. To the right is my portfolio… such as it is.

Changes to the blog

So on top of having a bitching yellow background, I’ve narrowed things down. Comments are on the left (a couple styles still need to be applied there) and the main section is more narrow. This makes the page longer, but is more friendly for mobile readers, and actually is fairly readable for screen-readers. Pictures should take up the whole width of the column now. I haven’t gone back into old posts to correct them, so the wide picture thing is a ‘from here on out’ scenario.

Archive pages exist again for things like Categories, Tabs and such. You could probably url-hack the site to get the archives for dates ‘n the like, but I have opted to not include any straight-up way of getting to them. Really they’re just not that important.

I’ve also got search going again! I’m a but surprised that not a single person complained about that on my old design, despite it being a total oversite on my part. And when I did notice it, I had absolutely no intention of adding it (read: giving up on the layout).

Changes to the portfolio

The portfolio is far from complete. After talking to some designers that are far superior to myself, I’ve had some gentle instruction to rethink what I was going for. Very valid arguments that I agree with. So as of right now, it looks the way it looks. When I get done with it, it’ll look totally different. I think I may just skip to the next part, which will talk about what I did here in greater detail.

Suffice it to say that it’s currently an alpha layout at best. I wasn’t happy with it when I started, so think of the current layout as more of a tech-demo.

Code changey stuff

First off, with my running this blog in WP 3-point-whatever version it is this week, I wanted to try and take advantage of some of the new features.

Custom content types! Gone are the hackey days of hidden categories and private posts. Now I’ve got Posts, Portfolio items, and Code items (subject to change). This allows for an easy separation of content, which has made my life so much easier. It requires me to do some custom loop stuff on the portfolio page, but man oh man is it easier.

JQuery stuff! In the last eight months or so, I’ve gone from knowing a smattering of jQuery stuff (how to make plugins go… barely) to writing my own. This is down mostly to my being a senior front-ender at Radley Yeldar, and the ever-pressing advances the designers want to go for with their designs.

Hm. That sounds bitter. I’m not, actually. It’s been a great learning experience for me, and I’m happy to have the challenge. Seriously every day it’s something new. Regardless, I’ve opted to gussy up my site with a bunch of interactions based on some more basic jQuery. Some are more obvious than others. The most noticeable one is the portfolio/code area functionality.

Basically I’ve ajax-ed the whole thing so that when you enter an article, it’ll load it up right there. The nice thing about it is that the fallback for non-js is that it will just link to an article-style page. Simple but effective. The final version of the portfolio will probably maintain that functionality, though the layout will be changing. I’m not sure to what yet (I was just glad to get the layout complete enough to release), but you can assume that the final version will be stunning.

Other changes that are afoot

I’m trying to get into a more regular posting schedule, if only to train myself to stick with anything for longer than a couple of weeks. Normally on Thursdays, but recent things (like releasing and altering a new layout) sort of took over. I’ll try and do a double-post this week. Key word: try.

I’m also going to be investing some more time into varying my posts up a bit more. I’ll be doing more tech-posting, since I’m back in that world. They will probably range between ‘pointless rants’ to ‘something useful and/or downloadable.’ Hopefully more of the latter, but knowing me – which I should – it’ll probably be more of the former. I’m a bit of a bitch that way.

Anyways, I’d love some feedback if anyone has any. I generally take constructive criticism into consideration, but saying ‘ It sucks lol’ will just be met with a sage nod, knowing that the Internet is maintaining the status quo.

1. Get Your Swag On
   
2. Man the Helm
3. Learn How Not to Suck

Get Your Swag On

First thing’s first, get your twitchy little fingers on your tools of choice. Where to start? Good question. Since I know I’m going to be using a lot of the Adobe family, I’ll be working with them as my example. Don’t be shocked if the program you want has a fully functional free trial available. All of Adobe has this, and I’m sure they’re not alone.

Here is a list of products that Adobe offers that you can get free trails of:

• Fireworks CS3
  This is my program of choice at the moment. It works much more with vectors (though in no way is it limited from bitmap) and is what I am using for my website design pieces. My reasons for this are two-fold. First, it is the program my workplace uses for all of our designing, and therefor is worth learning if only for practicality reasons. Second, It’s gradient/vector happy, and though I feel that 2.0 is a style that is being beaten to death far too fast some of it’s aspects are solid.
  
• Flash CS3 Professional
  It’s flash. I don’t think I need to get to much into this. If you do web development, this is at least worth a cursory glance. There will probably come a time when your customer will want flash in their solution, and you’ll have to do it whether you want to or not. It’s come a long way since I’ve used it (last time Macromedia had just come out with Flash MX)
  
• Illustrator CS3
  Vector drawing to the max. This program is pure vector imaging and works great with type. This is a great tool to have if you are doing print or web, as it allows you to create vector-based graphics which allow for way more flexibility in your reuse library. I have not used it much, and so I cannot give it the credit it is probably due.
• Photoshop CS3
  Who can forget the classics? Photoshop has been around for as long as I have been on the Internet. Countless jokes exist of people “Photoshopping” images and thousands of Internet Memes exist as a result of its existence. Getting past that, Photoshop is a fantastic tool which offers so much in functionality that most people don’t even know it exists. The only limitation with this program is that it is a bitmap-based program. I am sure there is the ability to work with vectors, but I have yet to really play with or even find that. Like I said previously, I use Fireworks for my vector work. I don’t need to sing the praises of this program though, since it’s utter integration into Internet society should state that it does it’s job well enough.
• And a whole list of programs, most/all of which have fully functioning trials.

As for the other listed programs, ArtRage 2 has a free version available, though it is locked down and does not have all the features available. I suggest downloading the free version and trying it out. If you enjoy it, you may as well spend the 25 bucks for the license. (That’s gone up since I last checked. I used to be like, 18 or so. Yay capitalism.) If you really like it, you can get the 40 dollar version which comes with a manual, tutorials and videos.

3ds Max and Maya both have trial versions available, and so If you are going to be using these (I have seen tutorials that do to get some sexy effects) then you can at least play around with them here. I’ve never used them myself, so I don’t know the learning curve but I can imagine them starting off easy and getting progressively more complex as you get into them.

Back to top

Man the Helm

Now that you’ve got your weapons of choice selected, it’s time to use them. My personal experience has taught me to open the program without looking at the manual, and just screw around. Learn the controls and see what you can create. It’ll probably look like hell, and that’s okay. Screw around and see what you come up with on your own. The point here is to wet your feet a little, and get a feel for the program. I’m still getting used to Fireworks, and I’ve been using it for at least a month now.

The reason I suggest this is just from my personal experience. I tend to learn better by figuring out the controls myself. Sure I need guidance with the obtuse controls, but I commit things to memory far better when I do it myself. Some people learn better from instruction or reading, and that’s cool too. I am merely pointing out the method of learning which works best for my brain.

Try not to get upset when the programs or the results created therein. Remember that you’ve only just started working with the tool, and no one expects you to be a savant. If you don’t like what you see, ask yourself why and then try and create it again so that you know how to avoid it in the future. Screwing up is only screwing up if you don’t learn from it.

Back to top

Learn How Not to Suck

Now that you’ve created some horrible works of art it’s time to learn from your peers, who are in this case most likely your betters in the field. for this, I’ve compiled a small (and in no way complete) list of sites you can go to for a little knowhow.

• PSDTuts.com – This is probably the must user friendly site for Photoshop tutorials I’ve ever found. Throw in the fact that the site is actually pretty stunning to look at, and that certainly adds to the trust level. I subscribed to their feed a while back, and I have yet to even think about regretting it.
• Firetuts.com – This is a brand new tutorial site that works specifically with Fireworks. Since it’s new it lacks in content at the moment, but If they keep it up for a year, they’ll be a reservoir of information for Fireworks users. I don’t see why they need to say that they’re trying to prove it can do much of what Photoshop can do, since the two products are really supposed to be used for two different task-sets… but regardless, they’re off to a strong start and worth paying attention to.
• Fireworkszone.com – Another site the specialized in Fireworks. They cover a couple techniques that are more advanced, and so I have yet to touch them. They seem fairly hardcore though.
• Flash Kit.com – It blows my mind to think that this website has been around for so long. It was old when I was new to all of this. If you have any questions about Flash, this is where to start. Seriously, start here and I doubt you will need to go anywhere else.
• N.Design Studio – Not only is it a stunning-looking website, but it also features many tutorials for Illustrator, Icon packs, and even WordPress Themes. It

And just because I can, I’m going to link GridMaker. It’s not perfect, and doesn’t work across many versions of Photoshop and Fireworks, but any tool you can use to speed up your own production is a good one. I’ve used this myself and it works like a dream. Now I’m using it on Fireworks 8, so I don’t know what happens in the other versions. There is also a Photoshop version, though the functionality has changed from its original.

Back to top

This is the fourth part in an ongoing series of articles that depicts my process to becoming a graphic designer. Coming up next: How to realize you know nothing, and not blowing your brains out as a result

• Part One
• Part Two
• Part Three
• Part Four (Currently reading)
• Part Five
• Part Six
• Part Seven