Tutorial Wow

Quick Tip: Glow Style Problems in Photoshop

Josh Drake — Thu, 18 Sep 2008 16:04:16 +0000

After all the years that I’ve used Photoshop, you’d think that I would have it all down by now, right? I thought so too! Until, that is, I stumbled upon a great tool that I always wanted, right in the familiar old Layer Styles dialog. That’s right, there’s an option there that I haven’t tried out until now!

Up till now, I always got frustrated over the Outer and Inner Glow styles not working the way I wanted them to. I would create some random shape, and then set the outer and inner glow styles so that the shape would look something like a lightsaber, but it never worked quite how I wanted it. Take, for example, the shape below:

As you can see, it has some tight angles, and if I put these styles onto it:

Blending Options

Outer Glow

Inner Glow

But that gives us the image below. As you can see, there are white points poking out at almost all the corners.

So how do we fix this? Well, as I found out, all you have to do is go into the Outer and Inner Glow options, and change the Technique from Softer to Precise. That’s it! So if we change the glow settings to this:

Outer Glow

Inner Glow

After we change those two settings, we get this:

And it’s fixed! Now our shape is a nice glowing lightsaber, with no white corners poking out anywhere.

Site Analytics with Woopra

Josh Drake — Sat, 13 Sep 2008 15:39:58 +0000

When I first started blogging with Tutorial Wow, I didn’t consider using an analytics program for it - it just never really crossed my mind. Then, one day, I ran across Google Analytics, and that all changed. I used that every day, going there and seeing how I was doing on traffic and visitors, and it worked great. But I thought I was missing something. I thought there should be some feature so that you could see how many people were on your site right then, and I couldn’t find anything like that. I was a little bit disappointed.

Then, after settling to be content with Google Analytics, I read an article on one of my RSS feeds that talked about a great new analytics program called Woopra that was still in Beta. I thought it sounded interesting, so I headed over to the official Woopra website to take a look at the new rage. What I found was truly amazing. Not only was their website design awesome, but when I downloaded the actual Woopra Desktop Version, I just sat there with my mouth open. Never before have I seen a program so extremely slick as this!

After I got past the first “wow” of the design aspect, I got another big “wow” out of the functionality of the program. As I said before, I had always wanted to be able to see what visitors were on my website right at the moment I was on, but Google Analytics didn’t have anything like that. However, when I downloaded Woopra, that was one of the first things I noticed. Now, whenever I open up the Woopra Desktop Client, I go right to the “Live” tab, and see who’s on my website right at that moment. Pretty cool, huh?

And that’s not all! There are many, many other cool features of Woopra, some of which I’ve listed below:

Website Statistics (obviously) - Total Visitors, Average Time Spent per Page, Page Views/Visit, Visits Today, New Visitors Today, Total Page Views, etc.
Real-Time Analytics - You can see what people are doing right now.
Easy Installation with Wordpress - Just install the plugin, and you’re good to go!
Real-Time Notifications - You can set up events that pop up when certain things happen - someone comes to your website, views a certain page, etc.
Live Visitor Chatting - If you see someone on your website that you want to have a conversation with, just click the “Start a Conservation” button in Woopra, and you can have a live chat with them!
Visitor Tagging - If you know that one of your visitors is your friend, then you can “tag”, or “name” him something so that you will always know that it’s him.
Impressive Search - You can search every visitor that every came to your website, find out his browser, OS, country, and language.
Track Multiple Websites - You don’t have to just track one website, you can track all of your websites.

So that’s pretty much it. If you haven’t tried out Woopra for yourself yet, then I really encourage you to head over to Their Website and take a look. You won’t be disappointed!

Quick Tip: CSS 100% Height

Josh Drake — Thu, 11 Sep 2008 16:53:39 +0000

I don’t know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn’t stretch. Now why wouldn’t it do that? Today I will share the solution with you.

Say you have coded an HTML file like this:




  
    

    CSS 100% Height
    
  

  
    
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

And you have a CSS file like this:

body {
	margin: 0;
	padding: 0;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
}

That gives you this example file. As you can see, the content box on that page doesn’t stretch to the whole height of the page, even though we added the “height: 100%;” line to the CSS file. Why is that?

Let me give you a different way of thinking about HTML. HTML is pretty much just a bunch of containers stacked inside each other. So in our page, first we have the container, then the container inside of that, and finally the

container inside of that. When we put content into one of those boxes, it stretches that box and all the boxes containing that box so that they can hold the new content. So when we put our text into the

box, that box streches, which in turn stretches all of the boxes that it is in (in our case the and boxes).

When we put the “height: 100%;” style onto the

box, what we are doing is telling it to stretch to the full height of the box that it is in. In this example, the box that it is in is the box. So the

box is 100% of the height of the box. Well, how tall is the box? It’s just as tall as the

box, because we never told it how tall it should be! So when we put the “height: 100%;” style onto the

box, we are just telling it to be as tall as itself!

To fix this, we need to tell the box to get bigger. But then we run into the same problem with the box - it is only as big as the box! So to fix our problem (to get the

box to stretch the whole height of the page), we need to tell the and boxes to be the full height of the page.

So if we change our CSS file to this:

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
}

And that’s it! This is what we have now. The content box is now stretched to the full height of the page!

Create a Sparkler in Blender

Josh Drake — Sat, 23 Aug 2008 21:38:52 +0000

I was just playing around with Blender, and I came up with a really cool effect. I thought to myself, “Hey, that looks pretty cool! Now what can I turn it into? Well, what does it look like? I know - it looks like the head to a sparkler!” And so, I played around a little more, and came up with a pretty neat sparkler.

Since it was such a cool effect, I thought I’d share it with you guys, and tell you how I made it. So without further ado…How to Create a Sparkler in Blender.

Note: I am using Blender 2.47, which is the newest version of Blender at the time of this tutorial’s writing. If you don’t have the newest version of Blender yet, go over to their website and get it now!

Final Result

The finished Sparkler:

Step 1

To start off, we will create the head, or flame of the sparkler. Open up Blender, delete the default cube (x), press space and go to Add>Mesh>UVsphere. In the little dialog that pops up, enter 5 for Segments, 5 for Rings, and 1.00 for Radius. Press S, type 0.3, and press Enter to scale the UVsphere down to 0.3 of its original size. You should now have this:

Step 2

With the new UVsphere selected, go to the Shading Buttons (F5) and then to the Material Buttons. Press the button that says Add New in the Links and Pipeline tab - this will bring up a whole lot more material options to play with. Click the Halo and ZInvert buttons in the Links and Pipeline tab, and then set the Halo color (under the Material tab) to R: 1.0, G: 0.678, B: 0.545. Go to the Shaders tab, and change the Halo Size to 2.0, the Add to 1.0, and press both the Lines and Star buttons. The Material Buttons panel should now look like this:

Step 3

We’ve finished the head of the sparkler. Now let’s position the camera so that it is facing the right way. To do this, first select the camera, and press N to bring up the Transform Properties panel. Then set RotX, RotY, RotZ, LocX, and LocY to 0, and set LocZ to 10.0. To make the render background black, go to Shading Buttons, and then World Buttons, and change HoR, HoG, and HoB to 0. Now that the camera is positioned and the render background is black, you can preview your sparkler head by pressing F12. It should look like this:

Step 4

Now that the head of the sparkler is done, we will make some sparks shooting out the side of it. This will make it look like someone is waving it in the air. So press Space, go to Add>Mesh>UVsphere, set Segments and Rings to 32, and Radius to 1.00. With the new UVsphere selected, go to the Material Buttons, and click Add New. Press the Halo button, and change the Halo color to R: 1.0, G: 0.818, B: 0.742. Under the Shaders tab, press the Flare, Lines, and Star buttons, and drag the Boost value all the way down to 0.1. Set the Halo Size to 0.1, the Hard to 127, the Add to 1.0, the Lines to 3, and the Stars to 5. This is what the Material Buttons tab should look like now:

Step 5

To make the actual sparks, first go to the Object Buttons (F7), and then to the Particle Buttons. Press the Add New button under the Particle System tab to create a new particle system for the UVsphere, and set the Amount to 500, and the Life to 100. Under the Physics tab, set the Normal and Random to 0.5, AccX to 1.0, and AccY to -0.3. Finally, to actually see the sparks, hold down the right arrow key until you get to frame 64. If you render the project now, you will see this:

Step 6

We’re now done with the flame of the sparkler, including the sparks. You have to admit - it’s looking pretty cool!

To finish off, we will make the actual sparkler handle that is being burned. Press Space, and go to Add>Mesh>Cylinder. Press S, type 0.1, and press Enter to scale the Cylinder down. Go into Front View (Num 1), press S and Z, type in 25, and press Enter. Then press R, type in -90, and press Enter to rotate the Cylinder -90 degrees. Go into Camera View (Num 0), press R again, type 45, and press Enter. Now just move (G) the Cylinder so that the top left end of it is in the middle of both of the UVspheres that we made earlier. Here is what your 3D View should look like now:

Step 7

To make the sparkler handle black, go to the Material Buttons, press Add New, and change R, G, and B to 0.

For the final step, go to Top View (Num 7), duplicate the only lamp in the scene (Shift+D), and position the new lamp like below:

Final Result

And that’s it! Render your scene, and you get a very cool sparkler-like effect that you created all by yourself. Here is my result:

Loads of Free Blender Materials

Josh Drake — Fri, 22 Aug 2008 16:03:50 +0000

Just the other day, I came across a website that has loads and loads of free Blender materials. I couldn’t believe it! Here, all this time, I had been breaking my back (or should I say, my fingers) over creating just the right materials when you could have just downloaded them for free off of this website!

The website that I’m talking about is blender-materials.org, where you can find materials for everything from metals, dirt, and wood to fire, water, and sky. They also have materials for fibre/fur, electric bolts, barbed wire, alien skin, and much, much, much more.

Don’t believe me? just head over to blender-materials.org and start saving time on materials!

Sneak Preview - Glow Theme for Tutorial Wow

Josh Drake — Sun, 03 Aug 2008 22:17:02 +0000

As you may have noticed, the current Wordpress theme that I have on this website (the 3D Vista Style one) was not created by myself (hence the footer). I am only using it temporarily until I can create and code my own template. Just today, I finished creating in Photoshop that new template, and all I have to do now is to code it. So I thought I would give everyone a sneak preview as to what it will look like.

Header

First thing’s first - the header. This is my favorite part of the template, and I think you’ll see why. I used a glow technique to make the “globe” in the logo, and the same effect on the navigation link “Home”. When the user hovers their mouse over one of the links in the navigation, the link will glow, and if they click on the link, it will stay glowing. Take a look for yourself:

Sidebar

In the sidebar, I used the Arial font so that I could make the text dynamic once it was coded. I used another glowing element in the RSS icon at the top of the sidebar, which ties in the glowing header. Almost all of the elements in this design have some type of stripe pattern for their background, which gives it a much more high-tech feel than if they had been solid color. Here is the sidebar:

Content Area

When designing the main content area of the layout, I didn’t want to have just a boring area of white, I wanted to make it more interesting. So I decided to overlay a subtle wide-stripe pattern on it, along with drop and inner shadows to make it feel more three-dimensional. I also made the horizontal rulers a blue color to tie in with the rest of the design. This is the content area:

Footer

After reading some articles on good footer design in websites, one of which is at Smashing Magazine, I wanted to do something more in my footer than a bland “Copyright by TutorialWow.com”. I thought that a good way to do this would be to place recent posts, recent comments, and About the Author sections into it, along with the copyright information. I played around for a while with the glowing headers, and bullet points (which are using the same glow style as the header and RSS icon), and finally came up with this:

Final Theme

I have told you about each of the individual elements of the theme, and now I will reveal the whole thing. As you can see, all of the elements tie in nicely with each other to create that cool glow effect that gives the theme its character. Here it is (click on the image to see the whole thing):

Since I’ve been really busy lately, and it doesn’t look like I’ll be getting any less busy in the near future, I probably won’t finish coding this theme for a while. This is why I wanted to give you guys a sneak preview - so that you wouldn’t get too bored. ;)

Until next time, happy designing!

Glossy Cutout Orb

Josh Drake — Fri, 01 Aug 2008 02:45:54 +0000

Today, I will show you how to make a glossy cutout orb. You can put any design on the orb that you like, such as a website logo, text, or just a cool shape. Let’s get started!

Final Result

Here is what the finished product will look like:

Step 1

To begin, open up a new document in Photoshop of the size 300×300 pixels, or whatever size you need to fit your orb. Take the Ellipse Shape tool, and make a circle in the middle of the document. You can make it a perfect circle by holding shift while dragging to create it. It doesn’t matter what color the orb is, because we will be applying a color overlay to it in the next step.

Step 2

To make the circle turn into an orb, we will apply some layer styles to it. Double-click on the layer that holds the circle to bring up the Blending Options dialog, then enter these settings:

Drop Shadow

Inner Shadow

Inner Glow

Bevel and Emboss

Color Overlay

And that gives you this:

Step 3

As you can see, the orb looks much rounder and realistic. Now we will make a shape look like it was cut out of the orb by applying different layer styles to it. First off, take the Custom Shape tool, and drag out whatever shape you want - I used the flame. Center the shape to the orb, and then apply these styles to the it:

Inner Shadow

Inner Glow

Gradient Overlay

You should now have something like this:

Step 4

Now for the final touches! As the title indicates, the orb should be glossy, and to make this effect, we must add a shine effect to it. Ctrl+Click on the orb layer’s thumbnail to make a selection of it, then go to Select>Modify>Contract, and enter 5 for the amount in the dialog that pops up. Take the Ellipse Select tool, hold down the Alt key to subtract from the selection, and drag an ellipse over the lower part of the current selection. You should end up with a selection similar to this:

Step 5

To finish the shine effect, create a new layer, make sure that your foreground color is white, and press Alt+Backspace to fill the selection you made with white. Rename this layer to Shine, and lower it’s opacity to about 50%. This is a simple gloss technique that can be used on anything that you want to appear shiny.

And that’s it! You have just created a slick glossy cutout-orb that can be used for many purposes. You can play around with each of the layer styles to achieve the effect you want - be creative!

Final Result

I hope you enjoyed this tutorial, because I enjoyed writing it!

Until next time, happy designing!

Wordpress 2.6

Josh Drake — Thu, 17 Jul 2008 15:04:57 +0000

Just last Tuesday (July 15th), Wordpress released version 2.6 of their blogging platform. If you have a Wordpress blog, but you aren’t sure if you want to upgrade it or not, then I hope that I can help you with your decision. Below, I have compiled a list of the new features that this version has to offer, so that you can make your own decision of if you want to update or not.

1. Post Revisions

One of the best new features (in my opinion) is Post Revisions. Let’s say that you made a big mistake when you were writing a post (like deleting all of the content or something else big), and then you ally saved it without fixing the problem. In earlier versions of Wordpress, you would just have to go and fix the problem manually, which could take you forever. But in version 2.6, when you scroll down to the bottom of a page when editing a post, you will see a new section named Post Revisions. In this section, you can view, compare, and restore previous revisions. Never worry about losing your work again!

2. Theme Previewer

Another good new feature is the Theme Previewer. As you can guess from the title, this feature lets you preview your themes without having to apply them to your site first. Not only that, but it even puts your own content into the preview so that it looks exactly like what your users would see.

3. Press This!

The new “Press This!” feature lets you post about articles that you find on the internet. In the post editing page, on the right-hand sidebar, there is a section labeled Shortcuts. Under this, you will see some text and then a link named “Press This”. Save this link to your bookmarks by clicking and dragging it to your bookmarks folder, or by right-clicking on it and selecting “Bookmark this link”. Now whenever you’re surfing the web and you find a blog post you like, all you have to do is press the “Press This” link in your bookmarks, and it will take you to a new blog post where you can write about the post you found, and add text, photos, and videos that are on the original post page.

4. Image Captions

When you’re writing a post to your blog and you want to insert a picture into it, but you want to be able to tell the user what the picture is representing, then the new Image Captions feature is just the right thing for you. All you have to do is click the “Add an Image” button above your post, select the picture you want to insert, add a title, and then type your description into the box labeled “Caption”. When you view your new blog post, you will see your picture along with its description below it.

5. Activate/Deactivate Multiple Plugins

In previous versions of Wordpress, when you wanted to activate or deactivate multiple plugins, you had to do each of them separately, which, combined with page reloads, took quite a long time. But now, in version 2.6, you can activate/deactivate multiple plugins all at the same time. Just check the plugins that you want to modify, hit the “Activate” or “Deactivate” buttons, and voila! They are all modified!

6. Many more smaller features

Above, I have mentioned some of the major features that come with this new version of Wordpress. But that’s not all! There are many more smaller features, some of which are as follows.

Word Count is displayed alongside the post editor.
Gallery Sorting allows you to sort your pictures in stead of having them be in the same order that you uploaded them in.
Avatar Display gives you more options for displaying avatars in discussions, such as using gravatars, identicons, and more.
Shift + Click Selection lets you Shift + Click to select a line of posts/pages for editing.
TinyMCE 3.1 Support
Newest Jquery Support
Google Gears for offline support.

And more! I hope that this post has helped you to decide to upgrade to Wordpress 2.6, and has shown you some of the benefits of doing so.

Until next time, keep designing!

Josh Drake

New Feature - Make a Suggestion!

Josh Drake — Fri, 27 Jun 2008 18:23:00 +0000

This week I decided to add a new feature to the site. Now you can make tutorial suggestions and ask questions about any design-related topic that you need help on. Just head over to the Suggestions page in the top menu, and post a comment there asking your question, or suggesting something new.

I hope that this new feature will help everyone to learn more, and that if you have a question, that you will not hesitate to post it.

On a different note, I will be going on vacation until July 12th, and I won’t be able to post anything from now until then. So all posting will stop until July 12th or sometime soon after that (unless I post some more today - by some miracle).

Blue Glossy Button

Josh Drake — Sat, 21 Jun 2008 22:51:58 +0000

In this tutorial, we will create a sleek blue glossy button in Photoshop. Though I will be using Photoshop CS3, any version will work. Let’s get started!

Finished Product

Here is what we will be making today:

Final

Step 1

Let’s begin by creating a new document of the size 500×350 pixels. Set your foreground color to #026d8d, and your background color to #01c1e2, and then grab the Gradient tool and drag a foreground-to-background gradient from the top to the bottom of the image.

Hint: To make sure that the gradient is perfectly vertical, hold down the Shift key while you drag the gradient.

You should now have:

Step 2

Now let’s create the button. Get the Rounded Rectangle tool, set its corner radius to 10px, and draw out a shape like this:

Step 3

Now we’re ready for some layer styles! This is always my favorite part of designing, because it really turns something flat into something 3D.

Make sure that your shape layer is selected, and then apply these styles to it:

General Options

Inner Shadow

Outer Glow

Inner Glow

Gradient Overlay

Gradient

Stroke

After you have applied all of these styles, you should have this:

Step 4

It looks pretty good already, but we can still improve it a lot. First, let’s bring up the contrast a bit. To do so, Ctrl+Click on the Shape layer’s thumbnail to load it as a selection, create a new layer, and fill the selection with a medium-gray (#808080). Set this layer’s Blending Mode to Soft Light, and then give it a gradient overlay:

As you can see, this made the button have a bit more contrast:

Step 5

To make the button look a bit more shiny, let’s add a shine to the top of it. Make a new layer above all of the other layers, and then get the Elliptical Marquee tool out. Drag out a pretty big selection like this:

Now we’ll narrow down the selection so it’s just in the button. Do this by Ctrl+Alt+Shift+Clicking on the Shape’s layer thumbnail. Fill this selection with any color (I used white). You should have this:

Step 6

Let’s add some styles to this layer too. With the new layer selected, apply these styles to it:

General Options

Gradient Overlay

Gradient

Now you have a nice shine on your button:

Step 7

To make the button look like it’s floating above the ground, we will add a drop shadow to it. Duplicate the button’s shape layer, and drag the new layer just above the background layer. Clear all of the new layer’s layer styles by going to Layer>Layer Style>Clear Layer Style, and then - with the Move tool - drag this layer down a bit. Finally, transform this layer to about half of its height. Look at this image for a reference:

Set this layer’s color to black, rasterize it (Layer>Rasterize>Layer), and then go to Filter>Blur>Gaussian Blur with a radius of 20 pixels. After lowering this layer’s opacity to around 70%, you should have this:

Step 8

The final step in this tutorial is to add text to the button. Head over to the website http://www.dafont.com/space-age.font, and download the Space Age font there. Create a new layer right under your Shine layer, and using your newly downloaded font, type the text Submit into the middle of the button. Set the font size to 72 pt, and the color to anything you want.

Hint: To make sure that the font is in the exact center of the button, do this: First, make a selection of the button’s layer by Ctrl+Clicking on its thumbnail, and then select the text layer that you want to center. Click on the Move tool, and then click on the Align Vertical Centers and Align Horizontal Centers buttons in the Move tool’s toolbar. This should make your text perfectly centered to the button.

Now let’s give the text some style. Use these settings:

General Options

Inner Shadow

Outer Glow

Gradient Overlay

Gradient

Finish

That’s it! You have now created a beautiful sleek submit button that you could slice and put on your website to show off.

In this tutorial, you learned some of the principles of Web 2.0 design - reflections, layer styles, and good drop shadows. I hope you enjoyed this tutorial, and that you will subscribe to my RSS Feed so that you don’t miss any more tutorials that I write.

Until next time, Happy Designing!