May 27
2009
From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.
How Does GrandmasterB Layout a Site for WordPress?
Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:
Read the rest of this entry »
No Comments Yet »
May 25
2009
PSDTUTS - Design a Ready to Print Brochure in Photoshop
VECTORTUTS - 60 Gorgeous Vector Business Cards
NETTUTS - How to Set Up a Killer WordPress Testing Environment Locally
Spoon Graphics – How to Create an Abstract Vector Design in Illustrator
10Steps.SG – Sexy Model (Jessica Alba) with Glowing Bubble Effect
Web Designer Wall – 30 Untypical Wordpress Sites
Abduzeedo - Awesome Milk Typography Effect in Photoshop
No Comments Yet »
Apr 07
2009
PSDTUTS – Construct C4D Renders and Integrate them into a Photoshop Composition
NETTUTS – Learn How to Style Articles for Print and Email
VECTORTUTS – How to Create a Retro Vector Illustration with Stylized Lines
CSS-Tricks – Navigation Markup After Content
Lee Munroe – Web Design Trends: Designing Out Of The Box
PSD Rockstar – Tutorial: Drawing an Abstract Lightbulb
Spoon Graphics – How To Create an Awesome Vector Skate Deck Design
No Comments Yet »
Mar 24
2009
This is my first tutorial in what I’m hoping will become a series of easy Mac Tricks. I’m all about customization, and especially when it comes to my Mac and my workspace. When I got my new Mac Pro for work, I spent a good portion of the morning customizing the look from the icons, to the wallpapers and even the Dock. If you’re a fellow design or even a casual Mac user; I’m sure you have a fair amount of launch icons in your Dock. I wanted to find a way to add separators to the Dock, so that I could easily sort applications and make it easier to locate them without hunting.
Well, if you have tried to do the same thing you probably noticed that there’s no way to add dock separators built into OS X. So, how do you solve the problem? Well, with a little research I have found the solution. First let’s take a look at my existing dock: Read the rest of this entry »
8 Comments »
Mar 23
2009
It’s been quite awhile since I have put together a tutorial using Adobe Illustrator. I’ve been working with Illustrator a lot more recently and decided to share an easy tutorial that will give your text some depth and make it pop off the page/screen a little more. I’ve used a few of these techniques before in my tutorial “Feature Post Logo” that I wrote last Spring. In that tutorial the finishing touches showed how to use the pen tool to add some shading to the text. This tutorial shows you another technique to achieve a shadow on your text.
STEP ONE – Open Illustrator, Create a New Document and Set your Text
I started out by creating a new document. Most of the time I use graphics for the web; however, there are times when my clients require the artwork for business cards, letterhead or other print collateral. So, you might want to create the new document profile for “print”, so that you don’t have to recreate the artwork if the client needs it for print.
After you have setup your new document, grab your text tool and set your type. For this tutorial, I used one of the great script fonts from House Industries…Sign Painter (House Script). This font isn’t free, but if you look around free font sites like DaFont.com; you should find something that works for you. One thing to note, is that you can use any style of font…I just chose a script font for fun.
I set the font size to 100 point, so that I could shrink it down later on for use on the web. If you use a script font you may need to bring in your tracking a little bit so that the letters flow together a little better. If your layers palette isn’t open go to: Window > Layers and get it opened. Once it’s open click the arrow on the left of the layer name “Layer 1″ and make sure you see the text. You’ll need to see these items as we go along. Once you’re happy with the type…it’s time to move onto step number two. Read the rest of this entry »
1 Comment »
