Athena Framework – WordPress Theme Framework

Athena Framework is a WordPress framework theme that’s more than just a blank slate as you may have noticed from other frameworks. It’s actually styled to the point that it can be usable and through slight modifications, it can be a totally different theme. In addition, it contains many common functions and features that a lot of my clients request or a lot of blogs have been using such as the Share This Post feature that allows you to share the current entry to Digg, Facebook, Twitter, Stumbleupon, and Delicious. (You can add more social networking sites simply by adding the necessary share codes – 45+ Most Popular Social Bookmarking Codes for Wordpress)

Another feature are the widgetized areas. There are 2 in the side bar which makes the framework capable of being a three (3) column layout, and also 4 widgetized areas in the footer which makes those trendy big footers you see running around lately on many blogs and sites.

Athena Framework also features an additional page template file to allow you to have a page with a sidebar, and a page without a sidebar. By simply selecting the Full Width Page template in the template section, you can quickly achieve that change.

This framework theme features some CSS3 Elements for experimental purposes, and also a Jquery Navigation Menu. There may be some frequent updates as I see some errors along the way or if you guys see any, so make sure to keep updated by following me on twitter or checking my site.

Download Athena Wordpress Framework

Thanks for checking out my theme and if you have any feedback, suggestions, or bugs just leave a comment. Keep out on the lookout for version 2 which will feature some Admin Theme Options.

Update: I have discontinued this theme. There will no longer be any modifications to it as Version 2 of this theme aka Ares Framework is released. Most of the bugs that were in Athena Framework are fixed in Ares Framework. However, Ares Framework does include the Admin Options. If you don’t like that bulk in your theme then you can still download version 1 of Athena Framework.

Typography has always been a favorite topic of mine, and I can already say that I’m not even close to a beginner in knowing all the techniques, “rules”, and properties of typography. As I grow older as a designer, I want to slowly strive to be better artist in typography. There’s something about fonts, placement, and the way you decorate the letters that makes me really appreciate the simplicity of typography at the same time be in awe on the complexities of making good typography art. As I delve into this topic, I’ll share my experiences and hopefully I can get better as time goes by.

In the meantime, here’s a walk through of my first experiment with typography and utilizing Adobe Illustrator (I’m using CS4 but I’m sure it can be done with CS and up) and Photoshop.

Final Result

Preproduction – The Concept of the Piece

To be honest, I didn’t plan to make this piece about Greek letters, I just saw the greek glyphs in Illustrator and decided to use them. It wasn’t until I made the background for my piece until I decided to think of the saying, “It’s all greek to me”. Ever get that feeling when somebody is talking in a different language, and you’re trying to understand it, but at the same time you know you’re lost? This piece is attributed to that.

Step One – Creating 3D Text in Illustrator

To create 3D Text in Illustrator, you first create your text that you want to have. For my piece, I was playing around with the glyphs of my font. To see the glyphs window in Illustrator, go to Window > Type > Glyphs. I noticed a lot of greek letters in there, and I wanted to work with it, so that’s why I chose the text I did now. The font I used was Avant Garde.

After typing your text and giving them a color, it’s time to make them 3D. To do this, make sure your click on your text that you want to apply the 3D effect and then simply go to Effect > 3D > Extrude & Bevel. You’ll get a new dialog menu that will show you a few options on how you want to rotate your text, how much you want to extrude, and if you want to bevel it or not.

Depending on your piece, the settings will be different, so I’m going to leave that up to you. As a reminder if you wanted to see the 3D text live before you apply the effect, click on the preview check box. Please note that it may render slow/fast depending on your computer specs.

Step Two – Importing to Photoshop

Now that we created our 3D Text in Illustrator, it’s time to import it into Photoshop. The quick and easy way is to just copy and paste it into your Photoshop document. I created a new Photoshop document, 900×1200, and then I pasted the text into the document. You’ll get a dialog box asking how you want to paste it. Make sure you check “Smart Object“, and then you can click “OK”. By importing it as a smart object into Photoshop, you are now able to resize it up and down without distorting it.

As you can see here, I imported 3D text and from there I scaled it, rotated it around, and positioned it. (Don’t clear out the smart object unless you’re positive that you’re not going to change it). If the 3D text doesn’t look good at that angle, then it’s back to the drawing board with Illustrator to position it in the way that you want. You can also position the text correctly in Illustrator and import it into Photoshop. (Now that I think of that, that’s probably more efficient than what I did)

Step Three – Building Text together

Now we get to the fun part of playing Tetris with your text. Start positioning your text the way you want. I decided to build them at one angle to make it easy for me, but feel free to experiment around with it.

Step Four – Creating the background

For the background, you can already see that I made a linear gradient background from sky blue to light purple (Somewhat close to those colors). I also duplicated my 3D text a few more times and rotated it and positioned it to make a collage of my 3D Text.

Then I took that collage and duplicated it more and created a background from it. I merged them all together and set the layer to “Multiply“. I made “holes” in the background to reveal the background and underneath my collage background layer I put another layer of my collage set to Normal blending option. I gave my big collage background that’s set to Multiply a blending option of “Drop shadow” to show that the background looks like it’s breaking or peeling off.

Step Five – Post Production Effects

And finally the post production effects — I added a “Curves” Layer, “Gradient Map” Layer, and a few other enhancements to spice it up a bit.

Conclusion

This tutorial wasn’t too detailed on the steps, but I hope you got the steps for creating 3D text in Illustrator better. I’ll be looking up for sites about typography and learn some tutorials and come back for you guys to make a good simple illustration. Thanks for viewing my tutorial and enjoy.

Final Result

Here’s what you will be making at the end of this tutorial (maybe not exactly, but the shape in there will be made):

You’ve probably seen these shapes quite often, whether it be my portfolio or in general designs out there. They are pretty trendy and add a lot of decoration to a design. When used right, the colors can be a great addition to a design and add that sense of abstractness.

Let’s set up our canvas. You should be able to do this with Photoshop CS and up. (maybe even Photoshop 7, it’s been a long time since I used that so I forgot whether it had custom shapes or not)

Step 1 – Setting Up Your Canvas

I always like to make a new canvas that’s 500px by 500px for all of my testings and experimentation when making shapes or brushes. It’s enough space to mess around with, and it’s not too small.

Step 2 – Setting Up Your Tools

The next step is to set up the custom shape tools so that you’ll be able to make your new custom shape. The settings I have are pictured above.

I turned Shape Layers on so that I can see the shape with color. And since this is our first shape it’s automatically defaulted to Creating a New Shape Layer. So pick the circle shape and let’s make our first circle.

Don’t make too big of a circle since you’ll need the space to add additional shapes.

Step 3 – Adding Multiple Shapes

While your circle is still selected (you’ll see a little ring around it), change the option of the custom shape tool to Add to Shape Area (+). From here, you can just have a free for all in making circles just like the picture below.

HINT: You don’t have to necessarily switch to that custom shape option. Rather you can hold shift, and your cursor will have a little plus sign similar to the cursor when you choose that option.

Step 4 – Subtracting From Your Custom Shape

Sometimes you may have added too many shapes, or you want to give your shape some interesting cuts in it. By choosing the Subtract Area (-) option, you can make shapes that will cut/erase your current shape like below.

It may look a bit busy, but if you wanted to see how your shape looks like without the pen lines, you can just hide them by pressing Crtl/Cmd+H.

Step 5 – Defining Your Custom Shape

After you finishing make your shape, select the pen tool from your tool bar or press the Photoshop shortcut key “P” and right click on the shape. You will see the option to “Define Custom Shape…”

After you click on that, name your custom shape and press “Ok“. You now have a custom shape. To access this custom shape, go to your custom shapes menu and look for it. Usually, newly created ones will show up last on the list.

And now you can use your shape as many times as you want, and even resize it without losing any pixels because it’s not rasterized yet.

Here’s my result after messing around with the same shape. I flipped it, I duplicated it, I rotated and changed it’s colors.

You can do a lot by making your own shapes. You’re not even limited to circles. Use other shapes, or even use custom shapes you’ve already made. The sky’s your limit on this one.

Conclusion

Thanks for looking at my tutorial about creating abstract custom shapes for Photoshop. If you have any questions or confusion, comment below and I’ll get to them. Show off your results as well here, or share a link.

Final Product

Step 1

To begin, I’m going to make a new document of 1500×1200 | 72 dpi | Background: Transparent. This doesn’t mean our site will be 1500×1200. I use this as a standard just in case I would like to add some nice background texture or do some interesting borders on our layout.

Step 2

Make your background white, and now is the time where we’re going to set some guides to follow. If you haven’t used guides before, then you’re in good luck. This tutorial will show you how important it is to have guides to line your work and be consistent with your spacing. I set my guides with my rulers or going to View > New Guide and fill in the information.

2 Vertical Guides set at 300 and 1200.
3 horizontal guides set at 200, 250, 1000.

I labeled our site so you know where everything is going to be laid out.

Step 3

We’re going to start with our overall build. I want the header to stick to the top of the browser window, and the footer to stick out, so it doesn’t seem like one whole page. For a clean look, we’re going to use some simple drop shadows and gradients. Nothing too fancy.

Make a new layer and make a selection covering from header to a little halfway into the footer and fill it with white. Add a drop shadow to the layer using these settings. You’ll get something similar to the third picture.

Step 4

Make a new layer, call it header, and make a selection around the header. Make sure you have “Snap to Guides” option, it makes it easier. For now, make this header some dark gray color, I chose to use #595959. In addition, I made the background of the layout a different color, to make the white stand out more. Make it a light gray color, I chose to use #d7d7d7. Remember you don’t have to use these colors. This set up doesn’t have to be a light themed color palette. Feel free to use your own colors.

Step 5

Make a new layer, make a selection within the guides for the navigation, call it navigation, and then make it some color you want. I chose to use a light red – #e85663.

Then, make a new layer, make a selection within the guides for the content, call it content, and then make it white. Technically you don’t need a layer, but I like to separate my layout as much as I can just in case I need to change the color or add something to it.

You should have something like this.

Step 6

Now we’re going to decide on how big our content is going to be. Using more guides, outline how far you want you content to reach within your layout. I’m going to give a 50px leeway space.

My 2 vertical guides are set at 350px and 1150px.

Make a new layer, call it footer seperator, and we’re going to take our pencil tool, set it to 1px, and I chose to use the same color as my navigation. Draw a line between the new content guidelines and directly on top of the bottom horizontal guidelines. This will separate your content from your footer. You should get something like the 2nd picture after everything. Check the final product for a clearer view.

Step 7

I went back to the navigation layer and decided to make a little gradient for it in its blending options.

#f1f1f1
#dddddd
#efefef
#ffffff

Here’s how my gradient is set up. Make the gradient lay to be set on multiply. And this is how my navigation looks. Adds a little flare to it.

Step 8

Now take your Text tool, and we’re going to add content to the layout. As stated before, we’re just going to have Home, About, Links, and Contact. I’ll be using Helvetica, but choose whatever you like. I made them all lowercase and bolded the first letter to give it some contrast.

Added a title on the page and a one pixel pencil stroke across the content area.

Step 9

Finally, I added all the thumbnails. My thumbnails are 150 px by 120px. Later, you’ll have to get your images, re-sized them to 150×120 and save them as a separate image apart from its larger counterpart. I finished it off by adding my copyright on the bottom, some other tiny adjustments, and we have ourselves a site.

Conclusion

There you have it. A simple layout to show your works. We’ll talk about slicing and coding in a later tutorial for those of you that don’t know how to do it. However, those won’t be coming so soon. Expect some Photoshop tutorials on certain effects and details to add more to your designs.

Thank you for reading my tutorial. If there’s any questions, comments, suggestions, feel free to leave a comment below.

Thanks again, and visit my blog for more tutorials and resources.

Credits go out to Vina for pushing me to get this done, and http://sxc.hu for the stock images that I used for thumbnails.

Download Link: Download Now – 131+ Photoshop Custom Shapes