March Contest Closed + Adobe on YouTube

Two things of importance today…

-The March Photoshop Contest has officially (well…as official as I get) closed Monday March 30th and the winners will be announced very shortly! Picking winners was super difficult because we got some really great quality images this time around, but I will have the top bunch of images in the winners video as well as the winning images. I will post a link on the blog, twitter, and obviously the YouTube video will be kickin’

- Hey did you guys know Adobe has started putting Dreamweave Tutorials up on YouTube? Check it out: http://www.youtube.com/user/tutorialsfromadobe Subscribe to them! This looks pretty good.

That’s all for now, keep your eyes peeled for more tutorials, written and video as well as those winning entries in the coming days!

Contest ends today and more Tutorials!

Got a great slate of material coming up this week as well as a new contest.

Remember The March contest ends at midnight tonight and winners will be announced shortly thereafter! Get your final entry in now! Contest Info.

Written Tutorial: Metal Lightning Bolt & Vector Leather!

Adobe Illustrator CS4 Tutorial: Create a Metal Lightning Icon and Vectorized Leather!

Click here to view video version of this tutorial!

Finished Image:

1. In the following tutorial we will use Adobe Illustrator to create a fully Vectorized Metal Icons as well as this Vector Leather. We will begin by creating a new Illustrator document File>New.

2. Next download this Leather Texture: http://www.cgtextures.com/texview2.php?id=15237&PHPSESSID=a0de8f18a6408c0524cbd5ed02838dbc Grab the 800×600 size and then after you have saved it to your hard drive get into Illustrator and hit Cmd/Ctrl + Opt/Alt + O to launch The Bridge. Navigate to the Leather Texture file and drag it into Illustrator. Don’t worry if it comes in and is very tiny we will fix that in a moment.

3. Next drag that Texture up to the top left corner of your document, grab your selection tool (Black Arrow, Hotkey = “V”) and drag the bottom right anchor handle out until the leather texture covers the entire document.

4. Now with the image selected turn your attention for a moment to the control bar (that bar that runs across the top of the document which changes every time you select something different) and hit the “Embed” button. This attaches the image right to the document, whereas before we were only linked to it. After we do that simply select the “Live Trace” Button.

5. Now we want to stick with the defaults, only changing the “Threshold” a threshold of 80 gave me a nice leather look.

6. Next, still up there in that control bar, we want to slide over to the right and hit the “Expand” button. Doing this in essence “un-live’s” the Live Trace and allows us to go in and edit the individual shapes that make up this Live Traced Object. Next we need to deselect everything which we can do by simpley clicking anywhere on our artboard or by using the hotkey Cmd/Ctrl + Shift + A. Now that we have done that we want to use the Magic Wand tool (Y) to select all of the white areas with one click.

7. Next we want to open our color panel, Window>Color and we want to work with grayscale so hit the little fly-out menu in the top right corner and choose “grayscale” and then set the color to 80%. This fills the white areas with an 80% gray.

8. Now look over to the Layers panel and click that little circle to the right of the Layer name to select the contents of the layer, then with them selected hit Cmd/Ctrl + C to copy the whole grouping of Vectorized Leather. Click the little blank space between the eye ball and the Layer name to lock that layer up and click the “Create New Layer” button. Then hit Cmd/Ctrl + F to paste the leather you copied into the new layer exactly into the same place as it is on the lower layer. Your Layers panel should look like mine.

9. Next with the Select tool (V) selected we want to grab the top-middle anchor handle and hold the Opt/Alt key and drag it down until this bit of Vector Leather covers about half of the older Vector Leather.

10. With that piece of Vector Leather selected use one of the corner points to rotate the whole piece until it can run from the bottom left corner to the top right corner. After rotating it to that angle select one of the middle anchor handles on the smaller sides and pull the piece of Vector Leather while holding the Opt/Alt key until it looks like the screenshot.

11. We now need to mask this angled bit of leather to our Vectorized Leather backdrop so we don’t see all the extra stuff hanging over the edges of our document. We need to begin our mask by creating a rectangle. Grab the Rectangle tool and click anywhere, you will see a dialog box pop-up. Enter a width of 800 and a height of 600 and hit OK. Then drag the rectangle to the top corner of the document so it is covering everything except the two edges of the diagonal piece of Vector Leather sticking out of the lower left and upper right corners as seen here (NOTE: The rectangles color does not matter!):

12. Next we want to fill this rectangle with the color white by leaving it selected (or selecting if it is not already selected) and going to our Color panel (Window>Color) and selecting white. Then hit Cmd/Ctrl + X to cut it right off there (At this point you cannot see the white rectangle, don’t worry Illustrator is holding it in an invisible clipboard location). Next we want to click on the little circle to the left of the layer top layer’s name to select that whole layer (Do this EVEN if you have the diagonal leather strap is selected!). After we are sure we have the whole layer selected double click that little blank area to the right of the thumbnail in the Transparency panel to create our Mask (Transparency Panel: Window> Transparency).

13. As soon as we create the mask you will see a little black box appear in there. You have created a mask and the whole piece of diagonal Vector Leather has disappeared, no need to panic. Press Cmd/Ctrl + F to paste that white rectangle into the mask, and, because white reveals, we see only the area of the diagonal Vector Leather bit that is inside of our documents boundaries.

14. Double click on that layers name and name the Layer “Strap”. Next select the Strap and copy it Cmd/Ctrl + C and Paste it in Back Cmd/Ctrl + B and with this shape selected open the Pathfinder panel: Window>Pathfinder and first select the “Merge Shapes” icon (Bottom row of icons, 3^rd from the left). After you have done the select the “Unite” icon (Top row 1^st on the left) and you should now have something similar to what I have.

15. Again using the Color panel we want to fill this shape with a 75% gray. It will not look like we have done anything because remember, we pasted this “behind” so it is currently underneath the leather texture. Hit the “V” key to select the “Selection” tool and hit Shift + Right Arrow Key to nudge that shape out from under the top shape a little. You will now see a little gray edge peeking out from under the Vectorized Leather Strap.

16. Repeat step 15 but fill that shape with a slightly darker gray, something like 65% gray. Then grab the Line tool (\) and draw a line along the top edge of the Strap where a line of stitching would be. Note the little white line near the top of my Strap in the screenshot.

17. We need to find a Brush to make this line look like a line of stitches, not just a straight white line. Before we do that copy that line and paste it and nudge it down ward so we have a line of stitching running along each side of the Strap and then open the Brushes panel (Window>Brushes). Then hit the little fly-out menu in the top right corner of that panel and navigate Open Brush Library> Borders> Borders_Dashed.

18. Now, using the Selection Tool (V) select both little lines we want to become lines of stitching and click on the border I have highlighted in the screenshot (It is a default brush included with Adobe Illustrator).

19. Select both lines, which have probably turned black and are nearly impossible to see, and go Object>Expand Appearance. We now are able to fill this line with any color, matter of fact we are working with a fill color, not a stroke color. Fill both lines with white and then, with them both selected, hit Cmd/Ctrl + G to Group them. Select this group in the Layers panel and look up into the Transparency panel and set the Opacity to 75%.

20. We are now ready to create our Vector Metal Lightning Bolt. Select the Strap layer in the Layers panel and lock it up by clicking that little blank space between the eye ball and the Layers name. Next create a New Layer and use the set your Fill color to none by selecting the Fill swatch at the base of the Tools panel and hit the “/” key and then select the Stroke swatch down there and set that to white by clicking on it and then using the Color panel to select a white. Then use the Pen tool to draw a shape like you see in the screenshot:

21. Select that line you have drawn and open the Stroke panel (Window>Stroke) and set the weight to 4 pt. Next copy the line, paste it, and nudge into a position similar to the screenshot:

22. Now that we have done that we want to attach these two line to make a fill-able shape. We can do this by using the Direct Selection tool (A) and selection the very top point of the line on the left and dragging it over until it touches the top point on the line to the right. Do this with the bottom point(s) as well. You should now have a shape that resembles mine.

23. Now drag a selection over the top joined point to select both anchor points in there and hit Cmd/Ctrl + J to join them together and choose “Corner” from the dialog box that pops up. Do the same with the lower points and then select the whole shape with the Selection tool (V) and hit Shift + X to swap the Fill and Stroke colors.

24. Select the Object and open the Gradient panel (Window>Gradient) and click on the little Gradient swatch in there this will fill our shape with the gradient we see. We want a metallic Gradient however so add a few points and fill in some blacks and whites and some grays until you get a Gradient like I have in the screenshot also be sure to set the angle to “90”.

25. Next Copy the Metal Lightning shape and Copy it Cmd/Ctrl + C and Paste it in Front Cmd/Ctrl + F. Select the shape in front and go Object>Path>Offset Path and set it like I have mine.

26. Now with that slightly smaller shape selected go back to the Gradient panel and set the angle to “-90”. This will flip the Gradient and make the shape underneath look like a metallic edge. A few little Strokes, Flares, and Shines later we have our final Metallic Lightning Bolt! All of these last finishing touches are covered in the video version of this tutorial!

Final Image:

Click here to view video version of this tutorial!

Thank you for checking out this Photoshop CS4 Tutorial! Be sure to browse Tutvid.com for more, great Photoshop, Flash, Dreamweaver and Illustrator Tutorials!

[HD] iPhone Slide to Unlock Flash CS4 Tutorial

Here is a pretty cool tutorial which was a request from the website (tutvid.com). In this video we will use Flash to take this iPhone look-alilke and make that little slide to unlock slider actually work. When you click and drag it across it will enter the icon interface of the virtual iPhone. This is a cool technique you can use for way more than just this iPhone. The techniques learned in this video can be used in all kinds of interfaces and web applications! We will learn a little about tweening with actionscript 3.0, eventlisteners, dragging movieclips, importing a psd from Photoshop right to Flash, and lots of other cool tips and tricks. Be sure to check out http://www.tutvid.com Check out the blog @ http://tutvid.wordpress.com

Sign up for the Free Tutvid Newsletter!

It is finally here! The Tutvid newsletter got launched last night and we already have a bunch of subscribers which is great!

CLICK HERE TO SIGN UP!

You will get a very cool zip file whihch contains all kinds of goodies for subscribing. The download is in the welcome email you recieve for signing up. If you don’t think you have recieved the email try checking your spam folder, or if you have the email without the download just shoot me an email on the contact form and I will get the zip file sent right out to you.

The newsletter bonus file contains:

7 Stock Photos

4 PSDs: The “My” Phone (iPhone which was drawn up in Photoshop), an older xBox 360 Composition, the final finished PSD from the 3D light zips tutorial (LINK to Tutorial), and a Music Player Interface built in Photoshop

3 Illustrator files (AI’s): iPhone Icons, a 3D Vector Background, and Vector Hearts (LINK to Tutorial)

2 FLA’s: Actionscript 3.0 Preloader, and Wavey Rollovers (LINK to Tutorial)

Go ahead and sign up for the newsletter and I am hoping to have montly emails sent out with all kinds of info and new subscriber-only tutorials, discounts and more!

Written Tutorial! Athletic Streaking Effect

Check out this tutorial with video by clicking this link!

Finished Image:

1.    Download the stock image I am using from the stock.Xchnge (www.sxc.hu) for free. Open the image in Photoshop and we are ready to go.

2.    Next we want grab our Crop tool and set the size of the tool to 740×415 and cut the image down to size.

3.    Because so much of this image is one color and really pretty much a solid color at that this makes a perfect candidate for The Magic Wand or Quick Selection tools. I was never a huge fan of the Quick Selection tool and it does have its uses, but for this image we will stick with the good…scratch the good, just old Magic Wand tool. Set your Magic Wand like mine (80 Tolerance and “Contiguous” checked “on”) and then select the sky area of the image. Next to add to the selection using the Magic Wand we want top hold down the shift key and just click in the area we want to add.

4.    Use Select>Invert Selection or the Hotkey Cmd/Ctrl + Shift + I to inverse the selection and wrap those “marching ants” around the snowboarder and not the sky. With him selected use Select>Refine Selection and the settings I have in the following screenshot to get a nice selection around him.

5.    Now that we have our selection we can use the copy to new layer hot key Cmd/Ctrl + J to pop him up onto his own layer. Now that we have him on his own layer be sure to select the layer with only the snowboarder and then hold the Cmd/Ctrl key and click the “New Layer” button to add a layer below him. Fill this layer with a dark red by using the hotkey Opt/Alt + Delete/Backspace.

6.    Now that we have him on his own layer isolated and on top of a solid, darker, color we can see some areas of imperfection which need help and cleaning up. Typically you would use Photoshop’s masking ability to clean this up in a non-destructive way, but here we will be a little lazy and grab the Eraser and clean up under his leg and around the edges of the jacket and really anywhere you feel needs to be touched up.

7.    Next we want to draw a gradient across the document and use that to compress into our colored lines of streaking goodness. Select the Gradient tool (G) and select the Gradient Editor up there in the top left of the control bar in Photoshop. With that dialog box open you want to set the gradient type to noise and cut back on the reds and blues in the gradient and randomize it until you get something that is pretty even. We do not want crazy blown out highlights and shadows. Once you get something you like hit Ok.

8.    Before we actually draw this green gradient you may be wondering why we are making this green when what we really want is red. I typically like to work with green, I don’t know why it’s just a personal preference, but feel free to work with red, or blue because we will be shifting the hue in just a moment. Create a new layer below the boarder and hold the Shift key down and draw the gradient from left to right across the document. You should now see this:

9.    Next go Image>Adjustments>Hue and Saturation, or hit Cmd/Ctrl + U to bring up the Hue and Saturation dialog box. Use the following settings to go from green to red. NOTE: If you did not use green you will want to play with the Hue slider to achieve the color we have here.

10.    Now, with that gradient layer selected, we want to duplicate it three times. Hit Cmd/Ctrl+ J three times to duplicate that layer and shut off the lowest layer (hit the little Eye icon to the left of the layer thumbnail.

11.    Select the top most gradient layer we just duplicated and give it these Hue and Saturation settings:

12.    Next, on that same layer we want to go Layer>Layer Styles>Blending Options or use the Blending Options pop up menu:

13.    Here we want to play with the “Blend If” Sliders. We are going to stick with the top slider for this layer. What we want to do is hold down our Opt/Alt key and click (this will split that slider) and drag the split part of the black slider two thirds of the way across toward the white slider as shown in the screenshot:

14.    Next we want to duplicate one of the red gradient layers by dragging it down and dropping it onto the new layer button or by selecting it and using the hot key Cmd/Ctrl + J and drag that red gradient layer above the orange gradient layer:

15.    Next de-saturate that red gradient layer by hitting Cmd/Ctrl + Shift + U and then Open the Levels dialog box by going Image>Adjustments>Levels, or Cmd/Ctrl + L. Use the following settings on that De-saturated layer:

16.    Next, with the black and white gradient layer selected go Edit>Transform>Flip Horizontal and set the layer blend mode to “Screen”:

17.    Next, over in the layers panel select the black and white gradient layer and hold the Shift key and select the red gradient (you should be selecting 3 layers total) and hit Cmd/Ctrl+E to merge hose layer together into one. Just ignore that layer group “StreakMaster” that is a bonus tip in the video.

18.    Select the snowboarder and use the Move tool (V) and drag him to where ever you want his final position to be. After doing that select the red/orange/white gradient layer and hit Cmd/Ctrl + T to use the Free Transform tool and drag the left and right edges to the tips of his left and right hands respectively. As soon as you have made your changes hit the “Enter” or “Return” key to commit the changes:

19.    We now need to mask this streak effect to the arms of this snowboarder. With the streaks layer selected hit the little “New Layer Mask” icon at the base of the layers panel to create a new Layer Mask:

20.    Next set your Foreground color to black (D) and then grab the Brush tool (B) and select a simple brush tip by right clicking anywhere on your document and selecting from the dialog that pops up. Then be sure you have selected the Mask by clicking on the white thumbnail to the right of your layer thumbnail and begin painting over all the streak area we want gone as indicated by the screenshot:

21.    Now that we have gotten rid of the streaks everywhere else we want to make these streaks look as if they are coming from further behind this snowboarder. Select the streaks layer by selecting the layer thumbnail (not that Mask thumbnail!) and going Edit>Transform>Warp. Now drag the top corners toward each other and play with the handles coming out of the corners to achieve the effect you see below:

22.    Now duplicate that layer two times. We now have three copies of the same layer and Layer Mask. Shut off the top-most of these three masked streak layers and select the second of the duplicated streaks layers and set the blend mode to “Soft Light” and select both layer by clicking the top one and holding the Shift key and selecting the lower one, then hit Cmd/Ctrl + E to merge them. Your document should now look something like this:

23.    We now want to apply a Layer Mask to this newly merged layer. Select the new Layer Mask button and grab the Brush tool (B) and right click again anywhere on your document and select a big soft edged brush and set the flow down around 40%. Note my settings and brush in the screenshot:

24.    Now be sure to select the Mask and paint across the top of the streaks of light to make them fade out nicely.

25.    Next turn the masked colored streaks layer back on and select the Mask then drag it to the Garbage Can and choose to “Delete” the Mask. We now have our streaks back as if we had never masked them at all. Next Cmd/Ctrl + Click the snowboarder layer thumbnail to load that as a selection (Note: we should still have the streaks layer selected in the layers panel, we just have the “Marching Ants” wrapped around the snowboarder). Next we simply want to hit Cmd/Ctrl + J to copy that section of the layer onto a New Layer.

26.    Take the little shape we just copied up onto a New Layer and drag it above the snowboarder and delete the layer we copied from.

27.    Now that the snowboarder is hidden we want to set the copied layer to “Overlay”.

28.    Now select that last red gradient we have down in our layers panel and turn that on. Use Hue and Saturation (Cmd/Ctrl + U) to tweak the Hue if needed and then set it’s Blend Mode to “Overlay”.

29.    About 5-7 minutes more spent on adding a little text and brushing and you get the final effect (all of the odd-and-ends are covered in the video).

Finished Image:

Thank you for checking out this Photoshop CS4 Tutorial! Be sure to browse Tutvid.com for more great Photoshop, Flash, Dreamweaver and Illustrator Tutorials!

Check out this tutorial with video by clicking this link!

New Gear: Intuos4 Tablet & Canon Rebel T1i w/ HD Video

Well some cool tech news related stuff today.

First up:  Wacom announced the Intuos4 at the Photoshop World Keynote earlier today. This tablet looks very cool, sadly I do not have one yet but maybe will get one soon although I do not really have any complaints about my intuos3 tablet. Check this thing out over on Wacom’s site: Intuos4 Large size tablet.

There are 4 sizes: Small, Medium, Large, XL and the prices range from $230-$790 depending on the size. This tablet is looking really nice let me know what you guys think…

We also have a nice little camera which was just introduced by Canon. The Canon T1i has 15+ megapixels and shoots 720p HD video plus so much more all for about $800 bucks. If you are in the market for a new digital camera or DSLR but don’t want to spend a huge amount of money I urge you to run a google search on this camera, you should be quite impressed.

I have not seen this camera yet so I cannot give you any info from hands on experience, but based on what I see this should be a quality camera for the price.

Contest Ends on the 30th!

Hello all, So far this contest has been awesome! I have gotten way more entries than any other contest (probably thanks in part to the multiple entries idea) and there are a whole ton of entries to sort through! I have recieved a bunch of really great entries and picking a winner is going to be really difficult. Be sure to get your entry in ASAP or at least before the 30th when this Photoshop contest ends!

Best of wishes to any and everyone that has entered! Keep those entries coming!

-As I mentioned yesterday the first written tutorials are coming very soon, any day now! I am also packaging up goodies ad bonus material which I will be sending out to everybody that subscribes to the newsletter (which has not come out yet, but I will get you the form and all the info you need to sign up when that all happens) as well as some other cool stuff, free tutorials and more.

-Lastly I have started linking all of the Photoshop, Flash, Dreamweaver, Illustrator tutorials together on Youtube so you can easily just browse through them as easily as clicking a button, here check it out in the screenshot below…

Vector Metal and Leather, DNG, CSS3, Icons and Photoshop World!

Hey all, for maybe my longest ever titled blog post of the 50-odd posts I have made to this point I am planning on loading it up with some cool and interesting stuff!

-Well first up I have a new Illustrator video tutorial uploaded entitled: “Metal Lightning Bolt & Vector Leather! Illustrator Tutorial“

Download the Leather Texture: http://www.cgtextures.com/texview2.php?id=15237&PHPSESSID=a0de8f18a6408c0524cbd5ed02838dbc Welcome to this video tutorial! We will be using Illustrator CS4 today to create some vector leather! After we create our leather we will create this nice shining and sparkling metal lightning bolt on it. In this video tutorial we will learn about a bunch of Adobe Illustrator’s features including, Live Trace, Bridge, Masking, Magic Wand, The Flare Tool, and More! Be sure to check out http://www.tutvid.com

-Next we have our first two written tutorials coming out any day now! The two newest tutorials, Vector Metal Lightning on Leather and Athlete Streaking Effect will both be available on their tutorial pages and here on the blog as their own posts. Finally we will have some written content as well as visual and my plan is to do this with all of my tutorials from here on out given I have the time and resources to do so. Be sure to comment and recommend them to friends and family, yep, even if they don’t use Photoshop! I will keep you guys posted on this one as they maybe be out as early as tonight!

-Well NAPP pushes their huge event all year long called Photoshop World. It all goes down in Boston this year around, well actually it is every 6 months or so that the convention/expo/trade show/huge training get-together happens. Sadly I am not going, but one of these times I swear I will be there. Great event all around by the folks over at NAPP. Check out the details here at: www.photoshopworld.com

-I use Camera RAW for all of my photography work including casual shots taken around the house as well as any family get-together. The quality difference is so vast and so much better on the part of RAW I can’t live without it. However over the past couple years I have been steadily moving from the Canon .CR2 camera RAW file to converting all of my photos to digital negative files (.DNG). Learn about DNG and the convertor here at PeachPit.

I do want to add as a side note that using Bridge CS4 you can auto convert your RAW files to DNG on import if you go File>Get Photos from Camera and hit the little check box “Convert to DNG”. If you don’t know what, or why DNG? Check this article out: Terry White’s Podcast: Why DNG?

- CSS3 is the latest and greatest version/upgrade/new features of CSS to gain support by browsers such as Internet Explorer, FireFox, and Safari, yea Firefox and Safari for the most part, but anyway check out this sweet video on CSS3: http://css-tricks.com/new-screencast-using-css3/ now it is over 50 minutes long, but if you are learning about CSS, are a serious web designer, or just have 50 minutes to burn I recommend you check it out. Great video by the folks over at css-tricks.com.

-Icons are pretty cool and everybody seems to love them. This is a blog post containing 22 great sets of icons, actually if you were to ask me I would say more like pieces of vector artwork. These icons have a crazy amount of detail and are are quite impressive. I recommend you check out: 22 Extremely Detailed and Beautiful Icon Sets Download a few and play around with them, you could even use them as more than just icons! Use them for all kinds of things, just be careful of any kind of copyright infringement stuff, which, quite frankly could be anything from set-to-set.

That’s all for now! Hope you all had a great weekend!

N.

Bi-Weekly or Monthly Newsletter … Coming very soon!

Let’s take a peek at today’s news and information regarding Tutvid, Design, and Adobe stuff in general.

- Newletter Coming Soon!: I have finally decided to keep you guys in the now with more than just RSS! Tutvid.com will be launching a newsletter featuring freebies, written tutorials, and other authors tutorials for free and sale! This newsletter is going to be awesome and I have huge plans for it!

I will be launching it very, very soon! Keep your eyes peeled!

-What are Variables? Actionscript 3.0: Here is a very cool tutorial I found explaining some of the simpler things to do with actionscript. Click here for the tutorial! For more great actionscript related tutorial material check out the site: Ntt.cc

-15 Examples of Long Exposure Photography: I really cannot recall if I posted this before on this blog, I do know they have a great tutorial on shooting light trails which I did link to, but this is also very cool. Check out these 15, very cool, photographs. Check out the exposure time on some of them! Crazy, but the final result is stunning indeed, check out all the photographs here!

-Tutivd Contest: There are only about 10 days left! Be sure to get your entry in now! There are a ton of great entries, but the more we get the better! Keep em’ coming! Click here for the contest video and details!