Monthly Archives: September 2010

Perspective Grid Part 2


This is Part 2 of the Perspective Grid tutorial. Part 2 consists of making our grid into a realistic library.

Materials: +Illustrator CS5 +Perspective Tool +Stock Photos +Blend Tool

Steps:

22. To leave off where we were before. We can draw some rectangles that represent the back of the shelves. Draw and group each rectangle in each row/column to fill all the “backs” of the shelves.

23. Let’s draw a black square that will be used for a clipping mask later.

24. Download some free stock textures and make sure they are wood patterns. I got these free stock textures from freestocktextures.com, go figure. I recommend download these items: http://freestocktextures.com/texture/id/698 and http://freestocktextures.com/texture/id/454.

25. In this step, we will make a clipping mask out of our front grid. To do this, send the grid to the back or front.

26. Bring the stock texture under/over our grid. Make sure that these two are both selected then right click and choose Create Clipping Mask.

27. Draw a similar black square anywhere on the screen. Stretch our second stock texture so it overlaps all of the black square. Select both of the square and texture and make a clipping mask.


28. Let’s drag our background text over our grid. Then, send this object to the back.

29. Now let’s have some fun and apply Inner Glow effects to each column/row of rectangles. Inner Glow is located in Effect>Stylize>Inner Glow. Set a shortcut for this effect or else keep clicking through the menu as we go through each rectangle. A good shortcut to set it to is PC: Shift+Ctrl+Alt+G or MAC: Shift+Ctrl+Opt+G. In the inner glow option box, choose a dark brown color, set the mode to multiply, set the opacity to 80, and blur to 15. These are recommended settings but feel free to change it.

30. Get through each rectangle and make sure they all have the inner glow effect.


31. Since we want the background texture to appear, let’s make all the squares that faces us, have an opacity of 50 or whatever you want.

32. Take some time to make sure everything is lined up and looking elegant.

33. Draw a square from one corner to another and apply a radial gradient.Make sure the color that is in the middle has an opacity of 0. See picture for reference.


34. Send this square to the back BUT in front of the texture.

And you’re down. Congratulations! This tutorial use some confusing methods but now you learned a lot more than you could’ve had.

The tutorial file will be uploaded via Box.net so you can play around with that.

Perspective Grid Part 1


Today I will show you how to make something similar as this but mostly likely this.

Materials: + Illustrator CS5  +Perspective Tool +Stock Photos +Blend Tool

 

Info: You might have noticed the part 1 in the title, that is because I broke it apart into 2 segments where 1 will get you as far the colored grid while 2 gets you as far as textures and shadows. This tutorial will also teach you a thing or two about the perspective that you’ve probably have never had experience with.

 

Steps:

1. Make a new document. Let’s have a 1000 by 1000 art board so we don’t make things too complicated.

2. Let’s choose the perspective tool from the Toolbar. If you don’t which one it is, just click the shortcut Shift+P to easily bring it up.

3. You’ll see that a 2-point perspective grid shows up. I don’t know about you but I want a 1-point perspective. So go to View>Perspective Grid>One Point Perspective>[1-p Normal View].

 

 

4. Let’s draw a long/thin, brown rectangle on the right side of the art board. Afterwards, drag-copy the same rectangle on the opposite side of the artboard.

5. Let’s select the blend tool (W).  Click one rectangle then the other. Double click the blend-tool in the Toolbar to get the option box. SelectSpacing>Specified Steps and write 10.

6. Select this blend if it isn’t select, then choose the rotate tool. Hold Alt/Option to copy while rotating. Make this copied blend perpendicular to the original.

 

 

7. Select both blends then go to Object>Blend>Expand to make them separate, editable objects.

8. Select everything, Ctrl+A/Cmd+A.

9. Now go to Window>Pathfinder. Then click the unite button under Shape Modes. Now make the united shape, light brown.

 

 

10. Select the rectangle tool. Do you notice the little perspective bubble near the top-left corner, click the left side of the cube that’s in the bubble. Or you could just click 1 (Left Grid).

11. Start from “box 1” that is inside our “grid.” The rectangle will automatically be drawn into perspective, Draw a rectangle where one side touches the left edge of  “box 1” and make this rectangle long. Also, make the rectangle dark brown. See the pictures for reference.

12. . Click and hold the Perspective Tool from the toolbar to bring up the Perspective Selection Tool. Or just click the shortcut Shift+V.


13. Using the perspective selection tool, select the dark brown rectangle. Holding Shift and Alt/Opt, drag copies of the rectangle towards the bottom. Make sure that each copy touches the left side of the grid boxes. Try to get to all the boxes in that column. Afterwards, group these brown rectangles. See pictures for reference.

14. Now this might be tricky but hold on. Select the rectangle group then hold 5+Shift+Alt/Opt to drag copies towards the right. Make sure that each copy touches the left side of the grid boxes.

15. Select all the brown rectangle groups, then click the rotate tool. Alt/Option click the exact middle of the artboard so it will know where to rotate from. So alt/opt+shift drag the rectangles 90°. Cmd+D to do the same thing again.


16. Change the colors for rectangles that are on the sides that are on the left, right, up and down. See the picture if you’re confused.

17. Now select all the rectangles and right-click and choose Arrange>Send to Back. Or click the shortcut PC: Shift+Ctrl+[ or Mac: Shift+Cmd+[.

18. Take time and adjust the positions of each rectangle so they fit precisely on the edges of the grid.


19. Take more time to see if everything is in place and every object is grouped with their similar counterparts.

20. Optional: Draw a square with a gradient, from one corner to another.

21. Optional: Close the bubble in the corner and the perspective grid will disappear. If your happy with this grid then just leave it as is here but if you want to make it look more realistic, proceed to Part 2 of this tutorial.

 

 

Part 2 coming soon.


 

iParent, Again!


iParent committee wanted more changes on the iParent poster and notecard and so I went to fix them. Here is what I just finished.

EDIT: I changed the times on the notecard and poster to 8:00 am – 1:00 pm.

RE-EDITS: Again, I changed the information in the bubble (poster and note card) and removed the “Food/Drinks provided…” line.

Perspective Tutorial Preview


Feel free to download this wallpaper. I will fix the colors and such later. I will also upload on DeviantArt. If your resolution is smaller than 1440 by 900, then crop this image if you must.

This project was started when I couldn’t find any wallpaper of shelves small enough to fit icons so instead  I made my own wallpaper. It is a work in progress since I need to recolor some parts. We will try to recreate these shelves using the perspective. I did this original project the old-fashioned way, moving anchor points. Can’t post this tutorial today. I am also getting ready for school tomorrow.

P.S. This project was based on my own desktop, a 1440 by 900 resolution with classic icons checked for view. Medium icons can work too but you will have to adjust the spacing between icons.

9/8/10: I will post the tutorial to make this wallpaper later this week. I will fix iParent today if I can.

Shapes Tip


Sometimes your on Illustrator and you go to the Shape Tools and you want to use a shape other than rectangles, ellipses, hexagons, etc.

Program: Adobe Illustrator

Polygon Tool: Chances are, you’ve probably ignored this one till now. Click the Polygon Tool then click anywhere in your workspace to get an option box. Now you can choose any number for sides to make any shape you want. 3 for a triangle perhaps? Don’t fool around and choose 1 or 2 for sides cause that won’t work. The more sides, the more circular. 1000 is the max sides and it almost looks like a perfect circle.

Free Distort: (Located in Effect>Distort & Transform>Free Distort) Want to make an irregular shape or something like a trapezoid. Use Free Distort by moving the object’s anchor points around.

Pucker & Bloat: (Located under Free Distort) This can help make star or clover shapes. This distortion depends on the shape of the object your using. Square, circles, and triangles all have slight variances on their distortions.

Twist: (Effect>Distort&Transform>Twist) This is a cool distortion effect where the object is warped into a whirlpool-like shape.

Zig-Zag: (Effect>Distort&Transform>Twist) This will give you curvy or pointy zig-zag distortion. It can be tricky to get it to work right.

Examples: (Left to Right: Polygon, Free Distort, Pucker…, Twist, Zig-Zag)


Inner Glow Intro Tip


Today I will be introducing the Inner Glow effect, if you yourself haven’t been acquainted before that is. Inner Glow is perfect way to color around the edges or from the center of the object. In this tip, I will show you the benefits of Inner Glow.

Materials:

  • Illustrator CS3/4/5
  • Inner Glow

About: I love the gradient tool in Illustrator. I use it all the time for all kinds of thing*1s. But sometimes the Gradient Tool isn’t the best tool for the job. Let’s say I made a star shape and want to darken around the edges*2 but gradients do a a poor job. The Gradient Tool only has linear and radial effects. The radial effect isn’t good enough to do the job today so let’s use the Inner Glow effect.

The Inner Glow effect is located in Effect> Stylize >Inner Glow*3. The Inner Glow effect is good when gradients aren’t enough. If you click the Inner Glow effect, a box will show up*4.  Always, always, always click the preview check box so you can see what you’re doing. The box to the right of the Mode option is your color, click it and choose whatever you want. Depending on what color your using for the effect, for the mode, choose screen if your using light colors(white) and choose multiply for darker colors (black). If you choose the wrong mode, the color (you picked) might not show. Opacity is just how transparent you want it to be. Depending on the size of the object, you may need to adjust the blur so it doesn’t cover too much or too little of the object. Inner Glow is only used to color inside an object from its edges to center or vice versa. If you cut holes inside an object*5, it will color around that area too which gradients can’t do. Plus, this effect sometimes gives a plastic appearance to an object.

Be sure to use this effect whenever you can.

Examples: Left to Right (1-5)

“3-D” Shadow Tip


Just an easy way to make “3-D” shadows unlike regular drop shadows that don’t connect the vertices of the letters/objects.

Materials: Illustrator CS3/4/5 Blend-Tool

Steps: Follow instructions and click the pictures for reference.

1. Create some text using the Text-tool. Write anything you want, I used FaDesigns.

2. Click the text and hold (PC: Shift+Alt,Mac: Option+Alt) to drag a copy. Set it down anywhere, I prefer at the bottom of it. Also, let’s change it’s color to black.

3. Right click the copied-text and choose Create Outlines.

4. Drag another copy, preferably, diagonally to it.

5. Get the Blend-Tool(W) and click one of the black text then the other.

6. Double click the Blend-Tool in the Tool-box. Now a window should pop out. Set the spacing to specified steps.  Then set the steps to about 20. The larger the number, the smoother the blend, the more work for the computer to process. So 20 is about good enough for blends like these.

7. We’re not done yet. Right click the blended text(“3-D shadow) and choose Arrange>Send to Back (PC: Shift+Ctrl+[ , Mac: Cmd + Shft + [ ).

8. Now drag the shadow over(under) the original text and you got yourself a cool effect. Try this fun experiment yourself!

iParent, Got Plans? Translations, and Tutorials


I haven’t given any updates in a while that was because I was trying to enjoy my summer. I did manage to improve/fix changes on iParent as you can see (<——).

Changes: Removed my vector GUHSD logo and put in the original GUHSD logo (given as psd) (poster/notecard); added a picture in the notecard, removed Save the Date on the poster, and removed “workshops to include” on the poster as well.  The community seems to like it.

Got Plans?: Skocko told us of an opportunity to translate the Got Plans? postcard, flier, and poster. Chris and me split the job. Chris did the Spanish translations and I did the Arabic. Chris had it easy while I had go through detours to type Arabic and put it on the psds. Photoshop CS5 can’t type Arabic without breaking the letters so I had to use GIMP to read and write over it with Arabic text. Skocko plans to get an Arabic/Spanish versions of Photoshop to not have to deal with issues  again.  Click these public links to view my translations:

  1. http://dl.dropbox.com/u/2920751/got_plans_postcard_arabic.jpg
  2. http://dl.dropbox.com/u/2920751/got_plans_poster_arabic.jpg
  3. http://dl.dropbox.com/u/2920751/got_plans_flier_arabic.jpg

9/3/10: Today, I went to help out in the Mac Lab. I never informed anyone so it was a surprise. The team (Kyle W., Phillip B., Chris C., Christian L.) was already setting/cleaning up things. We had a lot to do (cleaning screens+mouses+tablets, setting up computers+ethernets, etc.) and we did finish by 5:00. And going to Alberto’s wasn’t so bad neither.

Tutorials: I haven’ made any tutorials this summer and I’m really sorry for that but I start working on some starting today and for the rest of the week! I’m posting a new tutorial tonight.

News: The AVID shirts I made for Mr. Fanning was well-liked by the principal that he ordered shirts for the staff to wear on Wednesdays.

%d bloggers like this: