Browsed by
Month: May 2007

New Tutorial – How to make Dan’s Masking Tape Effect!

New Tutorial – How to make Dan’s Masking Tape Effect!

Welcome to another Corel Photopaint tutorial!  Today’s lesson is actually a tutorial request from a P2L community member, and despite there already being a couple of tutorial listed on P2L on how to do this, they felt mine was more realistic and wanted my recipe.  As always, you should be able to follow this pretty closely in Photoshop as both applications share very similar tools and concepts.

On a side note, I am currently sick as a dog while I write this, so please bear that in mind when you shake your head at any grammatical errors among my usual rantings.  I’m heavily dosed with NyQuil and Reactine (That’s about as hard as drugs get when you’re married), so things are a tad hazy at the moment.  But fear not!  Not even a cold medication induced stupor shall stop the typing!

Without further chatter, let’s proceed with masking tape goodness!  Here is the final result we’re aiming for:

For those of you that read my blog or news articles, you’ve probably seen me use this effect quite a bit.  What can I say?  It’s a classic!  If you’re ready to re-create this effect yourself, read on…

Step 1 – Let’s start off with a new canvas… Let’s go with 640 x 480 on a white background:

Step 2 – Next up, we’ll need to pick a color for your masking tape…  masking tape tends to be a sandy color, something like sandstone, so I’ll go with RGB color code 227 215 140.  Make this your background and foreground color:

Step 3 – Once you have your colors all picked out, draw the general shape of your tape with the rectangle tool:

Step 4 – This next step is very important… If you happen to have some masking tape around, peel off a piece and gentle stick it to something, but don’t press it down.  Notice that the color of the tape is pretty uniform?  Ok, now press the tape down firmly against the surface and you’ll now see that the tape has slightly dark splotches where it’s making better contact than other areas of the tape.  Well, that’s what we’re going to create here.

Start off by selecting the Paint Tool and be sure you are using a Standard Art Brush:

Then select the following Nib, which is pre-built in to Photopaint:

Step 5 – We only want our pen tool to apply strokes to the surface of the tape, so we need to apply a mask to the tape object we created.  Simply click on Mask > Create > Mask from Object (or hit Ctrl-M) and you now have a mask around the object:

Step 6 – Now take a slightly darker foreground color than the standard sandstone you were using to create the initial object (double-click the foreground color and click edit to select a darker shade of your current color) and start brushing on the darker color:

WARNING: DO NOT click and hold the mouse button and drag the mouse around.  Put your mouse in the spot you want to apply the color and do a normal click.  Then move your mouse to a different position and click again.

And here is the tape completely brushed:

If you’re happy with the brushed effect and you’re ready for the next step, remove the mask:

Step 7 – Next we create the torn edges of the tape.  A lot of tape tutorials will show you a technique where the end result is this weird shredded effect that, in reality, looks nothing like tape.  If you take a piece of tape and tear it, it’s usually a pretty straight line or maybe a bit irregular, but it certainly doesn’t look like the end of a shag carpet!

So, let’s start off by select the Freehand Mask Tool:

Step 8 – Now click the mouse where you want to start your mask (I started at the top) and drag it to a point farther down and click again.  You’ll see your mask has started to form…  down go down a bit more and click again until you are completely past the bottom of the tape.  Now click around the outside of the tape to complete the mask and double-click on the last connection point:

QUICK TIP: In the sample above, I started at the very top and slowly clicked my way towards the bottom left.  Once I was past the bottom of the tape, I then masked off the right side and double-clicked on the spot where I had first started the mask.

Once your mask is complete, hit the delete key on your keyboard and you now have a torn edge!

Here’s how it looks zoomed out:

Now do the same thing on the other side:

And now both sides have been torn off!

Step 9 – Let’s detail out our torn edges a bit… if you happen to have that piece of real masking tape I had you use to test out the “pressing down” effect, look at it again and you will notice that the torn edges are a big lighter that the rest of the tape.  This is because the tape is slightly thinner where you tear it, as it tears diagonally, not straight through.  Look at the illustration below, maybe that will help explain things…

So if you’re looking at the tape from the side with a REALLY good magnifying glass, you’d see that the tape doesn’t tear straight down, it’s actually diagonal, sort of like a knife’s edge.  That causes the edge of the tape to be slightly thinner, making it more transparent.  More light gets through, so it looks slightly brighter.

See?  I told you I ramble!

So with that out of the way, let’s lighten up the edges by grabbing the Eraser Tool:

Select a grainy Nib, like the one I am using below:

Step 10 – Now carefully erase the edge of the tape by clicking once, moving down a bit and click again.  In this screenshot you can see the outline of the nib (No idea why it won’t capture) but you should be able to see it fine as you work.  You only want the very edge of the nib to touch the tape as you erase the edge.

And here you can see the entire edge has been done:

Now do the other side:

Our torn edges are done!

Step 10 – With our edges done, it’s time for a fairly minor step, but one I feel helps dial up the look of the tape a bit, especially if you’re using this tape on a light background.  We’re basically going to give it a tony bit of a drop shadow, just to subtly outline the tape.  Start by creating a duplicate of the tape object by doing a copy/paste:

Step 11 – Open up the Brightness/Contrast/Intensity tool and turn the brightness dial all the way down so our new object copy is black:

Step 12 – We’ll soften it a bit by adding a 1 pixel radius sized Gaussian Blur:

Step 13 – Move the new object that we’ve just darkened and blurred down behind the primary tape object layer in the docker:

Step 14 – The black background is way too strong, so lets dial that down a bit by opening the properties of that object and lowering the opacity to around 50%.

Step 15 – Now combine the two object layers together and our tape is done!

Now with that out of the way, I’ll show you how I use this piece of digital tape to “stick” photos and images to a webpage!

Step 16 – Paste in the image you want to stick…  at this point, make sure the background color of your image is the same as the background color of the layout you’ll be putting this image in.  In this example, I’ll assume the background is white:

Step 17 – The tape is going to be on top of the image, not under it, so move the new image object below the tape object in the Object Docker:

Here’s where we’re at so far:

Step 18 – Now click on the image until you get the rotation arrows showing on each corner of the image like this (you’ll also notice in the next screenshot that I moved the tape out of the way a bit):

Step 19 – Click and hold the bottom right rotation arrow and drag your mouse upwards and you’ll see your image rotate.  Once you’ve reached an angle you like, release the mouse button and right-click and press apply.

Step 20 – Repeat steps 18 and 19 on the masking tape object and place it on top of the image:

Step 21 – You may have noticed that when we rotated the tape, it got a bit bit blurry on us.  No worries, we can sharpen that up again by applying an Adaptive Unsharp at around 70% – 100%:

Step 22 – Next up, we’ll add a bit of a 3D element to this effect by adding a shadow to the image.  This will make the image look as though it’s slightly lifted off the background where it’s not taped down.  Do a copy/paste of the pic so that we now have a second copy of the image object layer and once again, turn the brightness of the object all the way down to black:

Step 23 – We’ll want this to be a blurry shadow, so apply a Guassian Blur with a radius of 3 or 4 pixels:

Step 24 – Now move the shadow object layer all the way to the bottom of the Object Docker:

Step 25 – We can now get our shadow layer in to the correct position.  Hit the down arrow on your keyboard 3 or 4 times and then hit the right arrow button the same number of times:

Step 26 – Our shadow is a bit too dark and demanding, so let’s tone that down by lowering it’s opacity to 60%:

Step 27 – This next step is a bit tricky…  Seeing as the effect we’re after will make the image appear to be lifting off the background as we get further from the tape, it’s only logical that the shadow would be smaller as we get closer to where the tape is holding down the image.  So this means we need to reduce the amount of shadow we see at the top.

Click on the shadow until you see the Free Transform Arrows show up at each corner of the image (don’t confuse these arrows with the Rotation Arrows):

Now click and hold on the top right arrow and slowly drag your mouse to the left maybe 10 pixels or so and release.  You’ll see that the shadow has now moved inwards at the top:

If you’re happy with the results, right-click and click on Apply:

Our shadow is done!

Step 28 – And for the FINAL touch of realism, we’ll make the tape SLIGHTLY transparent by clicking on the tape object, opening the properties, and setting the opacity to 85% – 90%:

And we are done like bacon!  Add some text and whatever other elements you want and you’ve got yourself some realistic masking tape holding up a picture on your website.

Thanks for reading, please make sure to leave a comment below or share this tutorial!

Dan

P2L Reviews 'Extreme Website Makeover' Total Training Website Design Course + Win a Copy!

P2L Reviews 'Extreme Website Makeover' Total Training Website Design Course + Win a Copy!

Welcome to another review from P2L on Total Training DVD products. Tonight I'm going to tell you about a pretty sweet product for you Adobe software using webmasters called Total Training for Website Design – Extreme Website Makeover. Be sure to check out the final part of this review, where I'll tell you how you can win a copy of this package by mouthing off on P2L!

This is another beautifully narrated course series presented by the talented John Ulliman, an Adobe Professional and a multimedia designer since 1985. I've already gone through his entire Flash courseware so I can honestly say you don't get sick of hearing his voice. He speaks clearly and keeps you engaged in to the lesson so you can actually learn something instead of trying to deal with an annoying presenter.

First off, let me just mention that this isn't really a tutorial for the hardcore coders… this isn't a specialized PHP/XHTML type course. This is a dsigner based look at using many of Adobe's fantastic design tools to create and update websites. The courses cover the use of the following:

– Macromedia Studio 8 (Dreamweaver, Fireworks and Flash)
– Adobe CS 2

The primary function of the entire package is to teach us how to work with a client to update their website and go from ancient to in-style! It's the ultimate guide to extreme makeovers, and while some of the examples used may seem over the top, I can honestly say that I have seen real-live versions come up time and time again. So this is an ideal package for any of you junior webdesigners looking to get in to the Freelance market. Not only will you learn how to evaluate and improve old designs, but you will learn how to work effectively and quickly. This is important when you become a freelancer because you're often bidding at bottom dollar, so you really have to make the most of your time unless you fancy working for $3 an hour.

1996 called, they want their design back:

The new and improved version:

Let's have a look at how this package breaks down, plus you can score some free sample downloads by using the sample links located on the left of the product page.

Disc 1

  1. Lesson 1: Introduction & Project Background (10:08 min)
  2. Lesson 2: Creating a Company Logo with Illustrator® (24:52 min)
  3. Lesson 3: Website Layout using Photoshop® (48:56 min)
  4. Lesson 4: Making Slices with Fireworks® (46:50 min)
  5. Lesson 5: Creating a Dreamweaver® Site (32:00 min)
  6. Lesson 6: Cascading Style Sheets (46:19)
  7. Lesson 7: Main Navigation Systems (47:19 min)
  8. Lesson 8: DHTML Layers, Interactivity & Forms (51:42 min)

Disc 2

  1. Lesson 1: ADVANCED GALLERY PAGES (67:58 min)
  2. Lesson 2: FLASH® ELEMENTS & FLASH VIDEO (26:32 min)
  3. Lesson 3: MAKING FLASH® SLIDESHOWS (59:35 min)
  4. Lesson 4: CREATING A FLASH® BANNER AD (49:38 min)
  5. Lesson 5: MAKING A MINI FLASH® SITE (73:36 min)
  6. Lesson 6: SITE TESTING & PUBLISHING (36:32 min)
  7. Lesson 7: WORKGROUP INTEGRATION USING CONTRIBUTE™ (20:47 min)
  8. Lesson 8: INCORPORATING PRINT MATERIALS (30:07 min)

As always, the Total Training lessons play within a fantastic player interface that lets you jump around from lesson to lesson and skip to various sections. It's a snap to control the video, jump around to sections you want to re-review, or just skim through the entire course to look for key areas you want to focus on.

From a personal standpoint, I really enjoyed the second DVD, which focused on Flash based design and interactivity, which has always been my passion. The massive "Making a Mini Flash Site" was really cool and is an absolute MUST for anyone that wants to get in to making PROPER Flash based sites.

So once again, Total Training shows us why they are one of the top producers of self-learning interactive courseware for dozens of design and webmaster related products and I highly recommend you check out this awesome DVD package! To purchase your own set, check out the Total Training website for details!

How To Win!

Want to win your own free copy of Total Training for Website Design – Extreme Website Makeover? Well all you have to do it mouth off and win! Post feedback on any tutorial from now until Friday May 25th and I will randomly select one of those comments Friday night as the winner of the DVDs.

Good luck!

Dan

Sound off and Win AGAIN! Extreme Website Makeover Course Up For Grabs!

Sound off and Win AGAIN! Extreme Website Makeover Course Up For Grabs!

Here's your chance to win the Total Training for Website Design – Extreme Website Makeover package, valued at $149.99! We recently reviewed this AWESOME training product, and you can read the review here. To win, all you have to do is speak your mind and comment on tutorials! From now until Friday, May 25th, simply post your comments on any tutorials and on Friday night (sometime between 8PM and 11PM EST) I will randomly select a comment author as the winner. You can leave as many comments as you like and each comment will be considered an entry. Here's some minor rules and notes on the contest:

  1. All entries should be valid comments, not SPAM. Remember that all comments fall under the same critique rules as the feedback areas of the forum. Do not be abusive in your comments, be constructive.
  2. You do not HAVE to vote on a rating, although it is encouraged. Just a comment is all you have to do.
  3. Your comment can be on any tutorial submitted any time… you have as much of a chance of winning by selecting the oldest submitted tutorial as you do the first.
  4. P2L will pay the cost of shipping, however the winner is responsible for paying any duties or taxes.

If you don't know how to leave a comment already, simply click on the comment icon or click on "Comments:" just under the title of the tutorial record.

Also remember you must be a community member to comment! If you're not a community member, you can sign up for free here.

Once a winner has been selected, they will be contacted via PM and email and I will post their name in this post. Once notified, they have 1 week to claim their prize by confirming their shipping address. If they do not confirm their prize, a new winner will be selected the following Friday and so on…

So that's it guys, leave your comments and you can grab the loot!

Special thanks to Total Training for sponsoring our Sound Off Contests!

Good luck!
Dan

Smoke is coming out of the P2L factory building!

Smoke is coming out of the P2L factory building!

For those of you that pay attention to my blog, I’ve got a little something to share with you… the gears are grinding, the work fires are lit and the P2L dev team is up to no good! Well… more than usual anyhow. Yes guys, we’re up to something other than the normal day to day operations of P2L and we’re hoping to unleash it on our unsuspecting users in about a month or so. What is it you ask? Well… here’s a screenshot:

Secret Project!

Hmm.. seems to be rather pixelated. Damn those company censors! Well maybe if you stay tuned to my blog, I’ll see if I can cook up some clearer photos in the coming weeks. And no, it’s not our new MySpace profile page! Feel free to post your guesses, but I won’t be confirming anything and you won’t be hearing about this in the P2L news on the site.

Enjoy!
Dan

The Official P2L Newsletter is Coming! What would you like to see?

The Official P2L Newsletter is Coming! What would you like to see?

Hi folks!

I am very pleased that a project that I have tried to get off the ground several times will FINALLY be taking flight over the next week or so, and that is a P2L Newsletter! Starting *hopefully* next week we will begin to offer a sign-up system and a regular emailed newsletter to all subscribers with the latest scoops on P2L, what's coming up, heads up on ongoing contests and other awesome content.

BUT before we start sending out our new publication, I would like to hear from you guys, the community. What would YOU like to see in a regular P2L newsletter? Any and all suggestion gladly received.

Dan

PS. Just to cover the impending questions: No I can't include free back massages or LCD screens with the newsletter.