Monty-Blog.com
A Guide To Making Money On The Internet

 

 

In this tutorial we are going to create a textured tag that you can use in your website designs. Adding textured elements to modern web designs is a current trend. Learn how to create your own texture and then apply it to your design element.

Step 1

Create a new document 500px wide by 200px height. Then set up our main background colors. Have these backgrounds we are about to create stretch the full document width. Create a new layer and give the top 10px a dark brown color. Also create a lighter brown 1px highlight below that. Then create a new layer from there down to the 75px mark. Make that a mid range brown. Then create another new layer and make a light gray to a lighter gray linear gradient from their down to the 110px mark. Place a 1px white highlight below the 75px mark and a darker gray 1px highlight just below the 110px mark. Make the rest of the document background at the bottom white. This gives us a web style layout with a color range similar to PSDTUTS.

Step 2

Open up Illustrator. Create a new document. In step 2a make a rectangle that is 240px wide by 100px height. In step 2b use the Add Anchor Point Tool and add a couple anchor points where you want to make the shape of your tag. Use a guide to keep things lined up. Then pull your corners in 20px on the top left and bottom left corners. In step 2c draw what will become our cut out hole in our tag. Again use guides so its centered.

Step 3

Then use the Divide tool in the Pathfinder Palette to cut out the hole in the tag.

Step 4

Next use the Rotate tool (R) and rotate the tag a negative 30 degrees.

Step 5

Copy our tag and paste it into Photoshop. Choose Paste as: Path.

Step 6

Create a new Photoshop document that is a double the size of our tag at 580px wide by 200px height. We’ll use this to make our background texture. Give it a Linear Gradient from from a mid range tan to a slightly darker tan. Draw the gradient line from the top left hand corner down to the bottom right hand corner.

Step 7

Turn that gradient into some texture using the settings below.

Step 8

Copy our texture into our main document and rotate it so that it is set at the same angle as our tag.

Step 9

Then go to the Paths palette and make a selection of that path. Copy the selction. Delte the layer. Then paste our tag in place. Give our tag the layer styles below to give it some depth.

Step 10

Back in Illustrator for part 10a create a red Box 170px wide by 70px height. Put the text PSDTUTS inside. Then with the text selected go to Type > Create Outlines. Then rotate the red box with the text selected a negative 30 degrees, see 10b below. Now we select the text and the box and in the Pathfinder palette choose Divide. Then select each letter and delete it. So we have a red box with the letters cut out of it, see 10c below. Copy that box and head back over to our Photoshop Document.

Step 11

Paste the copied text and set the layer style to Multiply.

Step 12

Grab the eraser tool and add some texture by erasing some of our red text box. You can see the erasers I used below as well as the effect on the tag.

Step 13

You may be happy with the results we have so far and want to stop apply effects to the tag. That would be fine. I’m going to go ahead and add some additional depth though. Go to Edit > Transform > Perspective and drag the left bottom handle up a little bit.

Step 14

The transform pixelated our tag a little so to clean that up go to Filter > Sharpen > Smart Sharpen. Use the settings below.

Step 15

To match the angle of our transform and to add a little bit more depth grab the Blur Tool and apply it to the bottom right hand corner of the tag.

Step 16

Grab the Pen tool and draw a line that will form our cord to hold our tag in place.

Step 17

Flip over to the Brush tool and set the brush at 3px with a Hardness of 100 percent. Make sure we have our Foreground color set to black. Switch back to the Pen tool and either right click or control click and then select Stroke Path. Then get in there with a small Eraser and carefully remove the lower left part of the cord that overlaps the tag. This will make it look like the cord goes through the hole in the tag.

Step 18

Right now the background behind the cord going through the hole is really dark. We want to be able to see that. So lets add some lighting. Copy our mid range brown background. Go to Filter > Render > Lighting Effects and use the settings below.

Step 19

I set this copy of the background to Lighten and then moved it with the tag into the center of our document. Our final tag is shown below.

Conclusion

Creating texture is a lot of fun. It makes design elements that you create unique. Let me know if you find a cool use for your own tag design.

 

If you liked this post why not buy me a beer

With other projects taking up most of my brain power, Monty-Blog has taken a back seat. Now I feel its about time to pull it out the back of the cupboard, dust it off and re-launch it. So keep your eyes peeled for the new look Monty-Blog coming in the next few weeks. All thou I will still offer information and reviews on the same topics such as making money on the internet, blogging and internet tips, I’m going to be offering tutorials on using Dreamweaver, Photoshop, Illustrator, Flash, building websites and much much more. So keep checking back.

If you liked this post why not buy me a beer

I’ve just about recovered from my weekend which I spent Saturday rocking with the Arctic Monkeys and 1000’s of fans at their biggest gig to date. The location was Lancashire Cricket Ground, the weather was perfect and the show was amazing. Billed as a mini festival it really did live up to it’s hype. I’ve been a huge fan of the Arctic Monkeys well before their first album came out but have never got round to seeing them but I must say it was well worth the wait. Joining the Arctic Monkeys were a host top bands hand picked buy the Monkeys themselves. Opening the show was Japans top Beatles tribute band The Parrots. Now I know that doesn’t sound appealing but there was something strangely appealing about them. Then came Amy Whitehouse ending speculation on weather she’d turn up or not. The Coral were up next and then Supergrass before the long wait till the main event.

Read the rest of this entry »

If you liked this post why not buy me a beer

Do you use ads on your blog? Do you find that you can only position the ads before and after your post content?

If the answer to these two questions is yes I have found the Wordpress plug-in to answer your advert prays. Adman gives you a huge amount control over the positions of your ads on your home page and in your posts. With this plug-in you can place your ads in the middle of your of your post content as opposed to stuck out in the cold at the end of your post.

The plu-in was designed by Sum Guy and i’d just like to say that if you ever read this post. Cheers for a great Plug-in and keep them comming

 Download Adman

If you liked this post why not buy me a beer

Editing Wordpress themes can be mighty tricky as I commented on in the previous post but if but if your dead set on designing a theme that suits all your needs and looks exactly how you want it to, there are ways. Option one is become professional in CSS which would be great in the long run but will take time. If you can’t wait that long and want to design your theme straight away you can use Dreamweaver. In my opinion Dreamweaver is the king in the want you see is what you get web design packages.

Wordpress uses template files to control the appearance of the website. The web-page is assembled of several PHP files controlling specific aspects of the site like header, sidebar, main content etc.

To use Dreamweaver to edit these themes you have to combine the different PHP files into one Dreamweaver document so you can view the site as your editing it. An important start of point is to work out which PHP files correspond with which part for example the index.php is the main page and the single.php is the individual post part.

Create a new folder and copy into is the style.css of the theme you are editing and the folder containing the images.

Open Dreamweaverand create a new HTML document then save it in the folder you’ve just created. Switch Dreamweaver so you your viewing it in code view and paste in the lines below:

<!– Header part goes here –> <!– /Header part ends here –> <!– Main content here –> <!– /Main content ends here –> <!– Sidebar content here –> <!– /Sidebar content ends here –> <!– Footer content here –> <!– /Footer content ends here –>

The Lines you have just copied into your HTML document are code comments and will help guide you to put the right PHP file in the right place. If you want a different sort lay out just swap the lines to suit your need. Read the rest of this entry »

If you liked this post why not buy me a beer

A key factor to running a successful blog is have it well designed and professional looking. If your a wizard with CSS this will be breeze for you but for those of you that can’t get your head round CSS there are many other ways to get the look you want for your blog.

As you probably know there’s many free templates that you can find by searching on Google, but if your after are more professional look with a blog that around 10.000 other people around the world haven’t got Monster Template is a great site. Monster Templatesoffers 1000’s of great looking blog templates for very cheap prices. Now you may say I’m not paying for a site template when I can get them for free but if your using your blog for money making purposes you would be amazed at how much a professional looking blog increases sales. It only takes around 2 affiliate sales to cover the cost of the template and will certainly help increase your monthly revenue buy a significant amount.

Take a look at Monster Template here

If you liked this post why not buy me a beer