Tutorial Magazine Blog

A blog on design and tutorials..and lots more.

It’s been a tremendous start for TutorialMagazine. We’ve had almost 200.000 visits since we launched in February, and we seem to be getting more and more traffic. Another milestone reached today is that for the first time, over 1000 people subscribe to the RSS feed, that is staggering! It really does make me want to make TM even better for you. Thank you for all the positive comments on the blog and on Twitter.

Running this site, and finding new great tutorials takes a lot of my free time. To get a small break from it, I’ll be taking a vacation for the next two weeks. I’m off to beautiful Thailand (Kata beach, Phuket) with my girlfriend.

Tutorials will be posted as usual, but there might only be two or three per day, and not three or four, as I’ve ususally done. I hope you’ll have a lovely summer and I’ll see you when I get back. Possibly with some exciting news for new projects I’m working on.

Cheers!

Jørgen, owner/editor of TutorialMagazine.com

300summer09

Here’s a giant collection of some of the greatest tutorials posted in TutorialMagazine so far.

Visit 300 Most Amazing Photoshop Tutorials of Summer 2009

june

July is almost here, so let’s look back at some of the greatest tutorials posted in TutorialMagazine during June.

Visit 30 Best Photoshop Tutorials of June 2009

I got a question on Twitter from Chrissie Lint, she asks:

pagefold01

I’ve made a superquick tutorial that I hope will help.

Here’s what we’ll make:
pagefold1

And here’s how to do it:

pagefold2

I also found it useful to bend a piece of paper to see what different gradients and shadows to use. Good luck!

Follow me on Twitter, and get new tutorials the second they are posted!

Cheers, Jørgen

Well, hi there, and welcome to my first exclusive tutorial here at TutorialMagazine.com

Battlestar Galactica was a great television show, and while we wait for the upcoming movie, why not make our own Battlestar Badge?

This is what we’ll be making:

final1

Step 1.

Download this .zip file containing the textures you’ll need, as well as a template to work from.

Open up start.psd, and check that it looks like the image below.

step1

Step 2.

Let’s start building the components of our badge, using the template layer as a reference.

We want to draw a circle that will form the basis for our badge.  To make a circle that matches the size of the template, first place two guide lines as shown in the image below.

You can make guides by clicking and dragging from the horizontal and vertical rulers. If the rulers aren’t visible, select ‘View’ -> Rulers‘ or press Ctrl-R.

step2

Step 3.

Create a new layer and name it ‘base’ (by double clicking on the layer name). We’ll have lots of layers by the end, so we might as well keep them named and organized.

This new layer should be placed above the template layer.

Set the foreground color to white. On this new layer, draw a circle using the Ellipse Tool. Hold the shift key, then start drawing the circle from the point where the guidelines intersect (upper left corner) and let go when the size matches the badge template.

Remember this technique, we’ll be using it again later.

step3

Tip: You can remove the unused guides if you want, by dragging them back out to the rulers using the Move Tool.

Step 4.

Set the opacity of the base layer to 40%, This will help us see the template below.

Duplicate the base layer, name the duplicate ‘outer ring’. Add two new guides, as shown below:

step4

Step 5.

Select the ‘outer ring’ layer. We want to remove the central section.  Using the Elliptical Marquee Tool, select a circular area by dragging from the point where the guidelines intersect.

Delete this selection from the ‘outer ring’ layer by pressing the delete key on your keyboard. You should get this:

step5

Step 6.

Now we need to remove the lines in the outer ring. Use the Rectangular Marquee and Polygonal Lasso Tools to select the areas we need to remove, and press delete.

When you’re done, you should have the following:

step6

Step 7.

Select the ‘base’ layer, add 2 more guides as shown, and delete the area using the Elliptical Marquee Tool, like you’ve done earlier.

Your badge should now look like this:

step7

Step 8.

Reposition the guides as shown. Create a new layer called ‘inner ring’. Draw another circle from where the guides intersect.

step8

Step 9.

Control-click (hold the “Ctrl” key on your keyboard while clicking) on the thumbnail next to the layer named ‘inner ring’. This should select the whole circle.

In the Photoshop menu, find ‘Select’ -> ‘Modify’ -> ‘Contract’, and contract the selection by 3 pixels. Hit the delete key.

Tip: Clear your selections by pressing Ctrl+D.

step9

Step 10.

Let’s make the Battlestar Galactica text! First, download the font here. When you’ve installed it, reposition the guides as shown.

Since the text is curved, we’re have to add the text to a path. From the guides’ intersection, draw an ellipse using the Ellipse Tool, but remember to set it to the middle setting (as shown in the image below) to make a path.

step10

Step 11.

With the Type Tool selected, add the text by clicking on the path right beside the B in Battlestar. You’ll notice that the mouse cursor changes when its above the path.

Type in the text “Battlestar Galactica” in capitalized letters. Set the font size to one that matches the text on the template. I used 17,2 pt with a letter spacing of 20. You should now have something that looks like this:

step11

Step 12.

Add the bottom text “BSG 75″ to the existing path. You might have to select the correct path in the ‘paths’ palette. You will have to flip, rotate and move the text to make it fit.

Don’t worry if your design so far isn’t perfect. You should now have something like this:

step12

Step 13.

Now we’re going to make the two curved lines between “Battlestar Galactica” and “BSG 75″. You know the drill now, so make a new layer, call it “curved lines”, reposition the guides and make a circle using the Ellipse Tool. (remember to hold shift!)

step13

Step 14.

Once you’ve drawn the circle, select it by ctrl-clicking on the layer thumbnail. Contract the selection by 10 pixels, and press delete.

Delete the top half of this layer, using the Rectangular Marquee Tool.

You should get something a little like this:

step14

Step 15.

Use the Polygonal Lasso Tool to select and delete the section covering the “BSG 75″ text. You should now have curvy lines :)

step15

Tip: Try hiding the template layer now, to see what we’ve made so far, looks good doesn’t it?

Step 16.

It’s time to start making the central elements. Make a new layer called ‘wings’. Start tracing the wing-like objects using the Pen Tool. We’ll trace the left side first. Notice how I’ve done it in the image below.

Tip: If you need help using the Pen Tool, I’ve gathered some great tutorials on it at TutorialMagazine.com (go there and do a search for “pen tool”).

step16

Step 17.

Now we want to fill the path we’ve made. Make sure that you are on the ‘wings’ layer, click on paths and select the work path.

Right click on the work path and select ‘Fill Path’. Fill the path with white. This will give us one half of a wing.

step17

Step 18.

Duplicate the wings layer (right click on the layer name, choose ‘Duplicate Layer’). This will be our other wing half.

In the menu, select ‘Edit’ -> ‘Transform’ ->’Flip Horizontal’. Move the flipped layer over to the right using the Move tool.

Tip: Hold Shift while dragging to constrain the movement to the X axis.

step18

Step 19.

Don’t worry if there is a slight gap between the two layers, like in my image. Now, we need to merge the two wing layers.

While holding Ctrl, click on ‘wings’ and ‘wings copy’ in the layer panel.

Right click on one of the two and select ‘Merge Layers’. You should be left with one wing layer, perhaps named ‘wings copy’ - so rename it back to ‘wings’.

Step 20.

Drop the opacity of the ‘wings’ layer to 40%, so we can easier see what we’ll be making next. We’ll repeat steps 16-19 to make the central layer that goes on top of the wings.

Make a new layer called ‘bird’ (you can call it whatever you want, but I think it looks like a bird).

On this layer, draw the outline of the central piece using the Pen Tool, fill the path, duplicate, flip and merge the layer. I’ve not followed the template exactly, so draw what you think looks good.

Here’s my path:

step19

..and here’s what I ended up with:

step19b

Step 20.

Zoom to 100% and get an overview of what we’ve made so far. It looks great!

Now, let’s add some color and texture!

We’ll start with the ‘base’ layer. Apply the layer styles seen below. Remember to reset the opacity to 100% for all layers you’re adding effects to.

step20a

step20b

step20c

The result should be this:

step20d

Step 21.

Give the text layers and the ‘curved lines’ layer a color overlay of #1f141e.

step21

Step 22.

Give the ‘inner ring’ layer a color overlay of #e5df9e.

step22

Step 23.

Give the ‘outer ring’ layer these styles:

step23

step23b

Step 24.

Add these styles to the ‘wings’ layer:

step24

step24b

step24c

You should now have this:

step24d

Step 25.

Add these styles to the ‘bird’ layer:

step25a

step25b

step25c

The bird should look like this:

step25d

Step 26.

Before we get any further, let’s improve our background.

Create a new layer called ‘gradient’, and place it above the background layer. On this layer, draw a radial gradient using the Gradient Tool.

The gradient should be from #2839b7 to #05232a. Draw the gradient out from the center of the badge, stopping before you reach the edge of the document.

You might have to check ’Reverse’ in the Gradient Tool options to make it look right.

Set the layer’s opacity to around 50%.

step26

Step 27.

Import the file background.jpg into Photoshop and position it so that it covers the area behind the badge.

Set the layer’s opacity to 80% and it’s Blending Mode to ‘Soft Light’.

step27

Notice that the background is showing through behind the bird and wings. We’ll fix that in the next step.

Step 28.

Import the file center_texture.png and position it below the base layer. It should cover the hole in the base layer and cover up the blue background.

It should look like this:

step28

Step 29.

Now to jazz up this badge we need to get creative. Import the file gold.jpg, and place it above the ‘bird’ layer. Call this layer ‘gold’.

While the gold layer is selected, Ctrl-click on the ‘bird’ layer thumbnail to select the bird, and click ‘Select’->’Invert’. This will select the part of the texture we won’t need. Press the delete key.

Set the ‘gold’ layer’s opacity to 80% and the Blending Mode to ‘Overlay’.

step29

Step 30.

Repeat this process to add a gold sheen to the ‘wings’ layer.

step30

Step 31.

Let’s make some highligts on the gold layers. This adds some depth and makes everything look more real.

Create a new layer above the wing’s gold layer. Call this ‘wing highlights’.

Using the Brush Tool, draw white brush strokes on the edges of some of the ‘wing tips’, like I’ve done here:

step31

Step 32.

Ctrl-click on the ‘wings’ layer to select the wings. Inverse this selection and press delete.

Set the highlight layer’s opacity to 25% and the Blending Mode to ‘Hard Light’. Once you’ve done one side, duplicate and flip the new layer and move it over to the right.

step32

Repeat these steps to add highlights to the ‘bird’ as well.

step32b

Step 33.

If you’ve followed the TV series, you know that nothing stays shiny on the Galactica, so let’s rough things up a bit by adding some scratches.

Download and import these brushes into Photoshop.

Create a new layer below the wings layer, and name it ’scratches’.

Brush using your new brush presets with a dark color to add scratches and lines to the base.

The more time you spend on this, the better it will look. Be creative!

Below, I made dark red scratches, but later changed my mind and made them black instead.

step33

Once you’ve added lots of scratches, Ctrl-click on the ‘base’ layer thumbnail to select it, then invert the selection and delete.

This will remove the scratches that are not on the base.

Set the ’scratches’ layer’s opacity to 35% and its Blending Mode to ‘Hard Light’.

step33b

Step 34.

Repeat this process to add scratches to the ‘wing’ and ‘bird’ layers too. Experiment with different blending modes and opacities.

Step 35. - Final result

Here’s what I ended up with.

final1

I hope you have enjoyed this tutorial, please leave your questions or comments below.

Do check out TutorialMagazine.com to find hundreds of other hand-picked tutorials you can do.

Jørgen, editor of TutorialMagazine

Too many things were bothering me with the old design, so last week I set out to redesign/realign most of the layout. The result is what I think is a fresher, more usable design.

Click here to see the new and improved TutorialMagazine.com!

Although the layout was originally based on a grid, I felt that the tutorials themselves were overpowering each other. I didn’t see a way to add balance..until I saw what moviefill.com had done, adding small grey bars between the grid items. With these grey bars in place, balance is improved. I’ve also cleaned up the footer, and removed some menu items. The blog, too, has gotten a facelift. I’ve modified the great Masinop theme to fit my blog.

There are, of course, some bugs still, so if you spot one please let me know.

Cheers, Jørgen

You might have some trouble visiting the site today, because I’m switching hosts for the second time in three days.

Why am I switching from MediaTemple? Well, first let me tell you why I wanted to host with them in the first place. On their website they boast that you for only $20/month get 1000 GB of bandwidth and 100 GB of ‘premium storage’ - whatever that means. Now, what I needed was bandwidth, and lots of it. TutorialMagazine is a graphic-intensive site, serving up many gigabytes a day of tutorial screenshots. I needed a host that could serve up these images and leave me room to grow. I thought MediaTemple was that host.

However, MediaTemple gives you a limit of 1000 GPUs per month. A GPU is a Grid Processing Unit, or a measure of how much server processing power your site is consuming. I assumed that I wouldn’t use anywhere near the allotted 33 GPUs per day (1000 GPUs/30 days in a month). However, I found that during the days I was on MediaTemple,  I used about 10 GPUs every day! Over the past month we’ve gotten around 1000 visitors a day, which isn’t much compared to some other great tutorial sites out there (like photoshoplady and tutsplus). I hope the site will grow, but with MediaTemple my growth would be capped at around 3000 visitors per day. It doesn’t matter if they offer a billion gigabytes of bandwidth, I still wouldn’t get to use them because of the GPU limit. Here’s a look at yesterdays GPU usage report:

Now, I did try to reduce my GPU usage by caching queries to the database and optimizing the site in general, but I didn’t see significant improvements.

I found ANHosting, that provide 5000GBs of bandwidth/month and only cost $6.95/month (when you sign up for two years), and I’m in the process of moving the entire site to their servers now. I did have an issue with cPanel not showing the correct bandwidth limit (it says 5000MB instead of 5000GB)..but a support guy told me in a live chat (very handy btw) that they would get it fixed.

So far, so good.

I’d love to hear about your MediaTemple/ANHosting experiences. Why not leave your comment below?

A new home.

May 24, 2009 Uncategorized Comments

Well, the day has come and TutorialMagazine has been successfully moved to MediaTemple Hosting. Hopefully it will mean that I’ll have enough monthly bandwidth to support the massive spikes in traffic I’ve seen associated with compilations I’ve published. I’ll be posting the best tutorials of may tomorrow, so keep your eyes peeled for that. You can be the first to know by following TutorialMag on Twitter.

There might be some bugs stemming from the server move. Let me know in the comments or by email if you spot anything not working as it should.

Last night 6000 people from stumbleupon visited the site in a few short hours, causing me to go over my bandwidth limit of 40GB. After that happened all visitors saw was a “bandwidth exceeded” message.

The site is thankfully back up now, since you’re reading this. It was a terrifying moment as a webmaster to see that the site was down.

I’ve taken some steps to make sure it doesn’t happen again. I’ve doubled my monthly bandwidth and also signed up for mediatemple hosting, we’ll see if I move the site there soon. They feature *unlimited* bandwidth and that might help me sleep at night.

Just posted my latest compilation of tutorials from this month, see all 33 here
If you want to see your tutorials featured in TM next month, don’t hesitate to suggest them