General
  » Bookmark Deepillusion.net
  » News & Updates
  » Post News
  » Forums
  » Links!

  Downloads
  » Screensaver

  All About Jason
  » About Me
  » My Blog!
  » Portfolio
  » Work Progress
  » Things to Learn

  Tutorials
  » Photoshop
  » Flash(FlashMX)
  » 3dsm
  » HTML

  Contact Me
  » AIM: AsherKalvasce
  » Email me!

U s e r ( s ) O n l i n e :

<< Ultimate Layout 2 Photoshop Tutorial

Part 1: 3d StudioMax Work
Part 2: Photoshop Work
Part 3: Flash Work


Adobe Photoshop Work

     In this segment, I'll hope to teach you how to add some effects to the layout, and pretty much bring it all together. You can add some nice effects, details, and get the setup complete. Anything you do in this part can really be changed in any way, so be creative!

1. First step is easy. Open up the newly made 3D Art in Photoshop. Now, we'll learn to colorize it. Goto Image >> Adjustments >> Hue/Saturation. A popup appears... so check the Colorize button. Now set it to a pretty color. I'm going to use some blue color, you can use the same as mine if you want.



2. Make a new image now with the dimensions of 1100px width, and 300px hieght (the size of the image depends on whatever you want it to be... I want my layout to work with all resolution types, so i'm making mine really long... and when I code it I'll add a code to make no bottom scrollbar). Make sure the background color is white. Go back to your 3d image and find the Layers panel (Window >> layers). Hold CTRL (on your keyboard) and click once on the only layer for your 3d image. Now it should all be selected. Hit CTRL and C on your keyboard to copy your selection, and go back to you're white space. Once there, just hit CTRL and P to paste the 3d to your layout image.



3. Now comes the real editing! Move the image around so that your favorite part of it is in the center. After that, while still on the 3D art's layer, look around for the "Single Column Marquee" tool (top left of your tools window. right click each button to get more options). Select a part of your 3d image that's farthest right. We are going to make it slide accross the complete image. Hard to explain, but looks great... so take my word for it :).



4. Hold CTRL and T, then click and hold the line you have selected. Now don't let go! Slide your mouse accross the right of the image, and your selection will move too. Try to make it as straight as possible. It takes practice, and remember... if you screw up you can undo it! (Edit >> Undo). Once it's straight and to your liking, click any other button on your tool panel. Once you do that, a popup will come up saying "Apply the transformation?". Hit apply. If you see a little bit of white space between your new selected sliding part and the original 3d layer, then move your selection back a few pixels. Deselect it (ctrl + d)



5. Find the shape button(right click buttons on tool panel for more options), and make a square going accross the complete bottom. The square is on a new layoer, so put that layer above the 3d image. Now double click the square's layer and add put the effects on it that are pictured in the image below. Also, check Color Overlay and make it a silvery color (i used #cccccc as the color, opacity 100, blending mode normal). Once your bar looks good, doublicate the layer (layer >> duplicate layer), and move the duplicated layer up to the top... so you have one bar on top and one on bottom.



6. From this point on, you can pretty much be as creative as you want. You could add things like blends in the background, patterns, shapes, bars, lines, whatever makes you happy! I'm just going to add some simple low-opacity rectangles (using shape tool), a black background (bucket tool), and a navigation box (tutorial for this is in next step). If you don't want anything else, and like your image as it is.. then thats great too. If you want navigation though, I suggest you use the next step.



7. Here we can add a cool little navigation box. You can add whatever you want, but i'll just show you the basic part of the navigation. Look for your shape tool on the tool panel, and make a square near the left center of the image. Size doesn't really matter, but make the color white (or anything that looks good). Now, double click the layer the square is on, and make the opacity rather low (see image below). You also could add a border if wanted, by selecting "Stoke" and changing those options (which is what i did to mine, black border size 3). We'll add font when in flash, but if you aren't using flash then I suggest you put some words on the box... such as About, Domain, whatever you want. If you want more detail, you could make a smaller square then just douplicate it a few times, and have the font on that to make buttons.



8. Save your image as a jpeg, and you're done the photoshop part. Some of you may just need to image map the graphic, and then code it to be done. But you other hard workers want to add some sexy flash to it, I see... so let's move on!

Next Steps... Flash Work
Back

Copyright © 2003-2004 Deepillusion.net. All rights reserved.