Monday June 15th, 2009

Web graphics cutting (18:02)

After the vector series posts, we’re back to pixel world. Although we can (and must) use vector graphics in our designs, ultimately the web graphics are in pixels.

Many of my designs end up with dozens of layers, apart from keeping them grouped and organized, they are a mix of raster and vector graphics. So how do I cut a web site design all in pixels?

I have two methods: Using the copy merged command or the merge visible command.

I have an action recorded for each method. They both assume we have a selection, so start recording the action with a selected rectangle (the graphic bit we want in our website):

Copy merged:

  1. Press Shift+Ctrl+c (copy merged)
  2. Press Ctrl+n (new document)
  3. Press enter (accept new document default settings)
  4. Press Ctrl+V (paste the previously copied selection)
  5. Press Shift+Ctrl+Alt+S (Save for web)
  6. Choose your preset or settings (it will be recorded) and hit save.
  7. Choose your save path.
  8. Close the document created in step 2, don’t save.
  9. Stop the action recording.
  10. Now goto the actions tab, expand the recorded steps an click the “Toggle dialog on/off” icon (there should be a blank space with no icon) in the “Export” line. This will avoid the rewriting of the file over the last, by prompting the “save for web” dialog.

Each time you need to cut a piece from the design, you don’t have to rasterize. Just select the part and hit the action play button.

The merge visible command is very similar. The final result is the same it uses less steps, but we need to have a visible layer selected or it will fail.

Merge visible:

  1. Go to Menu Layer and choose “Merge visible” (this step is mandatory to preserve layer effects)
  2. Go to Menu Image and choose crop
  3. Press Shift+Ctrl+Alt+s (Save for web)
  4. Choose your preset and settings (it will be recorded) and hit save
  5. Choose your save path.
  6. Go to Menu Window and choose history
  7. Go back to the Rectangular Marquee step

Voila, your document is preserved and the bit you have selected saved.

This was a quick one, if you have questions, hit the comments link…

Tuesday May 26th, 2009

Vector drawing – Epilogue (08:05)

After the adventures with the shapes in the making of the tattoo. I should say one or two things about it.
Shapes are great. In photoshop, a shape layer accepts all the layer effects, can be re-sized at will without any lost of quality.
Once mastered the power of shape operations and the ability to add, remove and refine the anchor points and the curves, working with shapes is easy and strait forward.
Photoshop allow us to blend and mix them with raster graphics, which in turn add a new world of possibilities to our designs.

For a web developer, as myself, the initial stages of a new design always begin with shapes representing the background, the main content area, the header and the footer.
Often a shape layer is hidden and it’s only purpose is to measure an area.(learn how to measure in photoshop)

Photoshop has another great power related to shapes – text.
Photoshop can turn text into a shape. This can be very useful in logo designs (who wants to draw a logo in Comic Sans?), write the word, turn that text layer into a shape layer and use the shape techniques and operations to turn the typeface look or extend letter legs.
I hope you can unleash the power of photoshop’s shape layers and use it in your designs. This chapter is now closed. We will allways need these techniques, so keep them as a reference.

Monday May 25th, 2009

Vector drawing – The Tattoo Part II (12:48)

After completing the first shape, we need to add five more shapes.
There are at least two ways to do this:
a) Select the rectangle tool (or another shape tool), in the options bar make sure that the “Add to shape” button is select and that the shape is selected in it’s layer (we can see that it is selected when it’s path is visible). Now draw the rectangle and it will be part (added) to the selected layer.
b) Create a new shape (rectangle or whatever) do the tweaking business, when happy, select the Direct selection tool and select this new shape. Next do a Ctrl-X (cut).
Photoshop is going to ask what we want to delete, we answer the first option: layer.
With the direct selection tool, select any shape in the layer we want to add this new one and paste (Ctrl+v)
I use this method when the complexity of the design is very high. It makes possible to work on individual pieces of the final shape without the interference of the existing shapes.
By choosing the Shape area operation (Add, Subtract, Intersect and exclude – look at the options bar buttons), it is possible to achieve every shape trick.

For instance, to draw hole in a circle (a doughnut, the letter “O”, an eye, etc):

1 – Draw a circle with the Ellipse tool (press Shift for a circle).
2 – Direct selection tool, click on the circle with Alt key pressed (duplicate shape) and drag a bit
3 – Ctrl + t (Transform shape) re-size to a smaller size, with the shift key pressed (constrain proportions)
4 – Direct selection tool, click on shape, press shift, click the other. (both are selected)
5 – Use the align tools (look at the options bar) center both horizontally and vertically
6 – select the inner circle, press the subtract button (options bar again…)
Shape Subtract
Notice that both circles are independent, although they live in the same layer. To make them one single shape select both and press options bar button “combine”.
Once combined, both shapes are turned into one.

Now that you know a few more things, complete the half tattoo. Add new shape, tweak it’s anchor points, add another and so on.
When this half is done, turn it into one shape (select all the six shapes and combine them), then duplicate it (direct selection tool + alt key) by dragging to the left.
Next step is to mirror the duplicated shape. Make sure it is selected, Ctrl+T (free transform) right click inside the bounding box and choose Flip Horizontal and press enter.
Adjust it’s position.

The traced tattoo

I’ve choose not to match the reference file, just because it is a distorted picture, I’ve just aligned both left and right shapes and it’s done.

As a vector shape, we can re-size at will it won’t loose quality. The perfection of the corners and the curves is reflected in the final work quality. If this shape was meant to be printed it surely has to be perfected.

Leave your comment