Category Archives: CS5

Vector Orb Tutorial Part 1


It’s time again for another tutorial but this one will be another long tutorial so I will break it up into two. Part 2 will be posted tomorrow.

You’ve probably seen these types of orbs around the web and now you have the chance to make your own stylish vector orb.

Prerequisites: Illustrator CS4/5          Some experience with Illustrator

About: In this tutorial,  I’ll help you create a stylish vectored orb with highlights, shadows, blurs, and masks.

Steps:

1. A. Draw a perfect circle using the ellipse tool and holding shift to constrain its proportions and give it a radial gradient where the inside is white and the outside is black/gray. B. Give this circle an opacity of 50 %.

2. A. Add an inner glow effect by going to Effect>Stylize>Inner Glow. B. A window should pop up; choose white for the fill, choose screen for the mode, make the opacity 75 %,  make the blur .007, and choose the edge option. C. Add another glow effect using the same process and you won’t need to enter the values again since the settings will be saved until you change them.

3. A. Copy a circle of the same size as our orb and make another circle slightly bigger than it, also making sure that it is behind it and that they each have different colors. B. Use the Shape Builder tool (Shift+M, hold option to subtract parts) or use pathfinder to cut out the inner circle. C. Now with this shape, give it nice linear gradient that goes from black to white upward (90°). D. Move this object back onto our orb.

4. A. Use the type tool to create some text. I wrote M in respect to the Mac Lab logo but feel free to write some short text (initials maybe). B. Apply an Outer Glow by going to Effect>Stylize>Outer Glow. C. A window will show up; set the fill to black, set the mode to  multiply, set the opacity to 75%, and the blur to .08.

5. A. Draw a white oval near the top of our orb. B. Apply a gradient where it fades to white downwards.

6. A. Draw another white oval near the bigger one  so it’s adjacent to it. B. Set the small oval’s opacity to 50%.

7. A. Draw a short arc segment with a .565 stroke or any stroke that is about the same width of the small oval and make it have a round cap. B. Use the Width Tool (Shift+W) to shorten one end to a point by dragging the endpoint’s width anchors inward. C. Move this curve onto the orb and give a white stroke. D. Give this curve a 50% stroke.

Note: If lacking the Width Tool, just draw the shape as best as you can.

This is the end of Part 1. Part 2 will finish off by giving it shadows and reflections. Click here for Part 2.

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.


 

“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!

Update


Sorry I’ve been gone for a while but I been on a vacation with my family. I had a fun time spending my first week of summer. I’m was on R&R for some few days. I didn’t get time to check on the blog or draw anything but I’ll be sure to check on everything today. I plan to search for a lot of scholarships, enter contests(logos and such), and do some jobs. I’ll probably update FJ Studios soon as well. As for the iParent, oh curd!

Working on iParent as we speak.

An End but a New Beginning


The school year is almost over and there is just one more day left until summer vacation. I’m feeling so frustrated, anxious, and happy at the same time. Today was my last day to work on my Mac Lab final and I’m pretty sad that I didn’t get to finish one of my most important collage this year. But next year will be even better and I hope I’ll become a more professional digital artists. I so much big plans and I hate missing out on them. Good thing there will be the Mac Lab Summer Academy-this should keep me busy for a while. I also have the Adobe products right here at home so I can start creating things on my own time. I can’t wait to see the finished Mac Lab iBook when it’s all sorted out and put together.

The featured image here was a cover page I designed for my student chapter. I had to redo the design a couple of times since I wanted it to look good.

Make an Easy iTunes Icon Tutorial


Announcement: FJ STUDIOS HAS BEEN UPDATED.

An easy 5/10 minute tutorial to recreate the iTunes icon into vectors using Adobe Illustrator. As before, I’ve included a demo file. Download it via box.net if you want to use it/work on it. There are lots of pictures so don’t figure to click them all or you might get lost and skip a step or two.

Preview:

Prerequisite: Adobe Illustrator CS5 Prior knowledge/use of Illustrator

Steps:

  • Start out by creating a simple box, preferably not exactly square. Color it anything so you can see it.
  • Go to Effect>Stylize>Round Corners and then a window should pop out. Write anything for “radius” but make sure the corners are very round. I used 53 for my radius.
  • I recommend having smart guides on for the next series of steps (Cmd+U). Now, hold option/alt and drag out a perfect circle and color it. Now click Shift+D to switch to the draw-behind mode. Now hold option and drag out another circle that is fairly bigger than the original. As you can see, you’ve drawn behind the original circle.
  • Select the two circles. Now click Shift+M to activate the Shape Builder tool. Hold option to make a minus appear and hover over the inside of the two circles and click the inner circle to cut out that part.
  • Now make the circular object have a white color. Now draw inside the empty space, a big music note.
  • Now draw several small white circles around the edges of the black rounded box.
  • Select all the white circles or use the magic wand to select all of them easily. WARNING: MAKE SURE TO GROUP THEM AFTER YOU SELECT THEM OR NOTHING WILL HAPPEN. Now go to Effect>Blur>Radial Blur.  A window should pop out. Make the amount 100, set the blur method to zoom, and set the quality to Good. If set to best, it will really slow down your program. Now add the same effect again to make the streak longer.
  • Click the black rounded box and go to Object>Expand. Copy the box and paste in front and click Shift+Cmd+] to send it to the very front. Make sure the box is selected and click “/” on your keyboard which will make it have no fill/no stroke whatever be the case. Now select the no fill box and click the steaks and right-click then choose Make Clipping Mask.
  • Draw an elongated ellipse that covers about half of the box. Switch to draw-behind mode and Cmd+F to paste in front the previous black box we had copied before. Make the black box into a  blue box. Select the blue box and the ellipse and activate the Shape Builder (Shift+M). Delete the excess area, we only want the box shape. See the picture.
  • Select the red part and give it a nice gradient that goes from very light-pink to normal light-pink. Now select the bottom part and give it a gradient as well that goes from dark-pink to light-pink. Then send these boxes to the very back so click Shift+Cmd+[.
  • Make the music note and the circular object a group. You should know by now that groups are important. Now go to Effect>Stylize>Drop Shadow. A window should pop out. Leave the opacity to 75 but you can change it if you want. I set the X and Y offset to zero and left the blur on five.
  • Make sure the pink gradient segments are a group. Now go to Effect>Blur>Gaussian Blur. A window should pop out. Set the blur to about 15.
  • Paste in front the very same black box. Select the box and click “/” to make it have no fill.  Guess what we’ll do now. You got it? Well, if you guessed a Clipping Mask then you following along nicely. So make sure to select the gradient group and the box(that is in the front) then right-click and choose Make Clipping Mask.
  • Select all of your vectors then switch to the draw behind mode and Cmd+F two times to paste in front(or same position) two black boxes. In the picture, they are made red so you can see there are two of them whose outlines intersect one another. Make the top box have a highlight-like gradient. make the bottom box have a shadow-like gradient.

I hope this tutorial helped you to develop skills in some features you have never utilized or try. Thank you for anyone who has followed along this tutorial. Be sure to suggest anything you would like to see in the next tutorial through the suggestion page.

Word Count: 747


Dive into CS5


This picture is a poster made by Kyle W. and I for Mrs.White. Poster design will be a little more easier now with CS5. We got CS5 on Friday, but it’s not a trial version BUT will get the full version before/after it expires and we’re also covered for CS6 whenever that comes out. CS5 is amazing and I say that after touching the new features of Illustrator CS5 and Photoshop CS5 and I’m loving the content aware fill already as well as the width tool. The only thing that ticks me off is that I still have to outline the stroke to make it have a gradient since normal stroke can be one color.  Shapebuilder also makes thing a little bit easier than the normal method of using pathfinder(which might go extinct as shapebuilder devours it).

Monday: I was put in charge of making a poster for PTO who need posters/banners that promote kids being supplied food to students who don’t get to eat breakfast in the morning. I did not wish to do it but he insist that I do because he sits on his-so-called PowerChair. Anyways, I’m still trying to make color-theory poster as well as finishing the AVID poster.

Tuesday: Same as usual, working on icons and posters. I plan to make tutorials for Illustrator CS5 soon when I get finished making posters. Chris C. and Kyle W. are working hard on the “top-secret poster” for the school. The 3-d cityscape on the poster is cool but lacking color still. The file is huge and takes a while to save and so they barely make any progress on it which sounds like my big Illustrator project. I plan to finish the AVID poster by the end of this week so we can print it. I also will fix somethings in my EarthDay poster so we can print those out as well.  Don’t time to do anything today though since I have an arabic class in a few minutes so I guess I’ll a little bit harder tomorrow.

The i in iTeam


4/14/10: I improved the website a little but I still need more critical information about the yearbook from Mr. Gilwee.

The Good News: Kyle W. and Chris C. finally found a way to connect the iPad to the internet. They used a recently bought app that Skocko got so we could set up a wireless connection somehow. Their first step was trying to connect the iPad to the iMac. They first tried setting up an FTp server which was a dud but then they found a type of server that worked. They messed around some more especially in the network/sharing settings and enabled internet sharing which finally connected the iPad wirelessly to the internet. It proved succesful as we could move around files back and forth and use Safari on it as well.

The Bad News: We could only connect to one computer at a time so we still don’t know how to connect all of the computers at once.

4/13/10: I’m working on creating the website for the Valhalla yearbook and I already have the site up and running with the favicon made so all I have to finish is to put up some information about the yearbook.

4/12/10: I been working more on the Mac Lab Media logo than any other thing so far. I plant to finish it soon and this picture is just a WIP(work-in-progress). It is supposed to be the cover for the soon-to-be-published MacLab book. I plant to add the phrase “Where new media artist are born” followed by the author’s name.

The iPad team(currently Kyle W. and Chris C.) are working to make our test iBook functional. So far they have failed to upload a short flash animation that works when you get to the page its on. I want to help them soon after I finish the cover and also after I make the website for the Valhalla yearbook which people are bugging me about.

Also, I just went to Adobe’s website and checked out the new features in Illustrator CS5 and I gotta say it’s pretty wild. I can’t wait to try it out.

%d bloggers like this: