AU Blogspot

Whenever I get a question from a user asking me “how did you draw this?”, I often have to answer that I’ve used the Pen tool. The Pen tool is probably the hardest tool to learn in Illustrator. It just takes time to master it fluently, but once you do, you have this freedom to create. Sometimes we can get a long way using only shape tools like the ellipse, polygon, rectangle or rounded rectangle. With a bit of creative thinking and some simple aligning in combination with Pathfinder’s powerful tools you might just achieve the perfect drawing in no time. Here is another Illustrator tutorial where I show you to draw a simple icon without the use of the Pen tool…

Draw the basic shapes

Before you start you might activate Smart Guides (View > Smart Guides). Select the Rounded Rectangle Tool from the Toolbox and draw a shape as shown in the image above. You can modify the corners of the rectangle using the up or down arrow keys while dragging the shape. Make sure the radius of the rounded corners of the rectangle is big enough. Next, select the Rectangle Tool and draw a small vertical rectangle shape below as shown in the right-hand side image. Now select the Polygon Tool and draw a small hexagon below the small rectangle (see image above).Select the Selection Tool (black arrow) and select the 3 shapes. Click the Horizontal Align Center from the toolbar at the top. Select the Direct Selection Tool (white arrow) and drag a selection over the bottom 2 points of the hexagon.

Resize and align the shapes

Click in one of the points, hold down the Shift key and drag the 2 points downwards as shown in the left-hand side image above. Now select the Selection Tool (black arrow) again and select the small rectangle above the hexagon. Hover your cursor somewhere on the middle of the bottom border until you get the resize cursor icon. Drag the border of the rectangle downwards so it overlaps the hexagon shape.

Finalize the grip, merge and align shapes

  (more…)

Are you in the mood for some Action? I’m talking Photoshop Actions

They are the perfect solution to handle tasks with one click. An Action is a recording of several Photoshop operations and commands. Once the Action is created, one click is all it takes and the task will be executed. It’s very powerful, can save you heaps of time and it’s actually not that hard to create. Oh and before someone asks, this tutorial is written for version CS3. Certain things might be different in previous Photoshop versions.

In my previous article I talked about how you can apply a vintage look on a photo. Someone pointed out, “Wonderful technique. I stumbled across something sort of similar a while ago but it’s too time consuming to keep on applying” Yes, good point of course. I have to confess, I have this effect recorded in an Action, but my tutorial was all about the process on how to create this effect. The surprise that people didn’t know about Actions gave me the idea for today’s tutorial: how to create an Action for this effect, or better how to record an Action. We’ll also look at a few options you can do or add to your Action and how to save it.

Creating an Action

Step 1 : Create New Action

Open a photo where you want to apply the vintage effect on. First make sure the image is on a separate layer on top of the background layer. You could use command/control + j to duplicate it in a new layer. Open up the Actions palette. If it’s not visible on your screen, go to Window > Actions. First click the folder icon Create New Set at the bottom of the palette to create your own set of Actions. Name the Set My Actions or any other name you think is better. Now click the Create New Action icon at the bottom of the palette. Name the Action Vintage Effect and hit Record.

Step 2 : Record the Action

Notice that the red record button in the Action palette is pushed or being active. Every Photoshop handling is now recorded into the Action. Now execute all handlings explained in the Phototshop Vintage Effect article. While doing this, take your time, there is no need to rush. Photoshop only records your actions and commands. The speed in how you perform this doesn’t matter. When you’re done click the Stop button in the Action palette. The Action is now stored in the palette in the ‘My Actions’ Set.

Adding a Pause to an Action

What if there is one command in the action that you’ve recorded that is different for each individual image? For instance you need to make a selection and for each image this selection is different. This is something you can add after the Action is recorded. For example if I want to add a pause for applying the Curves, then I need to toggle the dialogue function on next to the Curves ‘Make adjustement layer’ action (see picture below).

(more…)

               Thanks to friendlyuser for permission to use this Photo.

Book design and layout is one of the least-appreciated niches of graphic design.  This niche also presents some of the biggest challenges to a professional designer.  Aesthetic demands can sometimes conflict with what the client has asked for.  When this happens, a designer must exercise what I call “assertive tact” by offering a clear presentation of why his or her book design concept is best for the project at hand. 

One company that consistently produces beautiful books is Phaidon Press.  They specialize in books about art, design, and other creative fields.  Their volumes are always eye catching and uniquely different from the average book layout.  If you go to the art section of almost any large chain bookstore, you will find an array of Phaidon Press books.  What makes their books so successful from a design standpoint is that you– and all of us in the field– want to own the books and study them.  They are beautiful, edgy, and always very appropriate for the author’s content.  I encourage you to seek out some Phaidon books at your nearest large bookstore chain.  Or, you can visit their website to get glimpses of their layout mastery.

Michael R. Nelson
Graphic Design Instructor
Ashworth University  

 
             Thanks to Rick Prelinger for permission to use this Photo.

Photoshop TV is an excellent resource for online tips, tutorials, and best practices for new designers/developers/photographers.  Their database of instructional videos are easy to follow and rich with useful applications.  The video we’re featuring today covers some of Camera Raw’s features, neat ways to incorporate Smart Objects, as well as a few different cropping techniques.  Let us know when you start utilizing these methods in your work. 

P.S.  These guys have recently changed their approach to displaying videos, but they’re still easy to access.  To watch the aforementioned video, simply scroll down to the bottom of the screen linked above and click download.  If you have any issues, let me know in the comments section of this post… 

Ryan Rode
Interactive Services Manager
Ashworth University

          Thanks to Robert Marinkovic for permission to use this Photo.

Cascading Stylesheets, or CSS, can be pretty awkward at times. It allows you total control over the presentation of a webpage within a browser; but having the resulting webpage look identical in each different browser (IE, FireFox, et al) can sometimes be difficult. Here’s a selection of handy tips I’ve found - see if they help you too.

100.01% Font Size

CSS: Getting Into Good Coding Habits says:

This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.

Link Styling: “Love/Hate

Link Specifity says:

All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same time as it’s an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the “active” style will never appear, because it will always be overridden by the “hover” style. (more…)

Back in October I took this photo, in front of our house. A cool scene, bright colors and a double rainbow. After seeing this picture on my Flickr page, I received an e-mail from Marco who asked me about the post process of this image. Now here is my answer…

Choose your image carefully

First of all I need to mention that some pictures are better suitable than others. It’s a good thing to experiment a lot and find out if the result is to your liking. Btw, not all settings I suggest are written in stone. Sometimes you discover the best effect by accident. How it looks good for you also boils down to personal preference. Let’s take this picture as an example and create this same effect. 

Add Contrast And Saturation 

Place the image in a separate layer.  In the Layers palette click the adjustment layers menu icon and select “Brightness/Contrast“.  Check the preview option so you see the direct result.  Set the Contrast to +20. Hit OK.  Click the adjustment layers menu icon again and select “Hue/Saturation“. Set the Saturation to +20. Hit OK.

Adjust Curves

This time choose “Curves…“. Select the Red channel and make sure the edit points icon is selected. Change the curve line a bit as show in the image above.

Select Green from the Channel dropdown menu and adjust the curve as shown in the image above.

Now select Blue from the Channel dropdown menu and adjust the curve as shown in the image above. 

Add Vignette Effect

Select the layer with your photo and go to the Filter menu and select “Convert for Smart Filters“. Doing this means you can apply filters to the photo while leaving your original in tact. First you’ll get a message that says the layer will be converted into a smart object. Click OK. With this approach you’ll be able to adjust the filters you’ve applied at any time. These Smart Filters work a bit like Adjustments layers but then with filter effects.

(more…)

 
                  Thanks to Lyndal for permission to use this Photo.
 
As a web designer/developer, one role often required is to secure adequate web hosting for the website(s) you’ve been assigned to build. The kind of hosting you should pick should certainly be matched to the website — any colossal site rolled out for a new corporate product would not be hosted on a super budget hosting plan. But you shouldn’t go overboard and use hosting that is too advanced for the project either, especially if your client has a limited budget. In this post I’ll discuss the various types of web hosting available to better inform you. I’d love to hear your views too.

Shared Hosting

Shared hosting, also often called virtual hosting, is where your website is stored in it’s own directory on a web server which, generally speaking, hosts between a hundred and a thousand websites in total. Having this many different websites on one server means the costs of being hosted are kept to a minimum, but there are physical limitations imposed on you.

Pros: