Feb 24, 2010

Layers

If you haven't been working with layers yet, you are on a different level with all of the other designers in your field. Layers can be dynamic, beautiful and engaging elements that grab a hold of your viewers. So why wouldn't you use them?

Pros:
As stated earlier, it's an eye catcher. It can really add depth to a piece and turn "pretty" into "interesting."

It's not to hard to do and a lot of programs carry this option.

It can be used to incorporate two different ideas into one graphic. For instance, you could take 7 United States flags and drop them into an outline of a star. Each flag can even be a different opacity.

Cons:
It will increase memory size. Not too much though. You won't be able to see any differences in work flow unless you are using a 386. That's old PC humor...

Printing different shades of colors is different than what you see on the computer screen. But then again, a lot of print jobs hit this speed bump.

So how is it done? The concept is really simple. Imagine you have a projector; the old projectors that were used in schools back in the 1980s and 1990s. They all used plastic "films" which projected an image on the white screen using light. These films had images with certain opacity levels to let the light through.

In theory, this is the same as using layers. Layers are much like the "films" and can have different effects added to them and properties as well. Photoshop offers a lot of special effects and layer blending modes. Most Adobe software programs have layer options, even After Effects uses them.

Once you have the layers concept you can move on to layer effects and blending modes. This will change what you are able to do in Photoshop. Adding a gradient to a graphic layered on top of a background will look amazing if done correctly. In summary: learn what you can and practice layers. And do it often.

Feb 17, 2010

Rounded Corners Part 2

In the first tutorial we went over how to use an action to create rounded corners in Photoshop. The action used 6 guides to create a grid and then formed a selection with one rounded edge and 3 sharp corners. From there you can simply copy the layer 3 times and form a box with all 3 rounded edges. It can be a perfect square or a rectangle, but beware: once you have form the box there is a trick to editing the size.

Lets say that you have created a rectangle with the 4 layers of rounded corners. Then you merged the layers together and used it in your design. As always, your client will want to change something and give you 3 more sentences to fit inside the rectangle. The normal reaction would be to transform (cntrl + T) the rectangel. DO NOT DO THIS. If you transform the merged cornered box the rounded edges will "warp" or sag. I will now go over how to correctly and quickly transform the rectangle instead of using the free transform tool.

Select the rectangular marque tool (M). Use the marque tool to cut the box in half by simply selecting half of the box and then select the Move tool (V) while the box is still selected. Nudge the selection to the right or left or grab it and move it. If you would like to keep it clean, hold down the shift key to keep the two halfs aligned. Now you have a large gap in the box. Not a problem at all. Use the marque tool again to select a flat section of the box (not the rounded portion!) and again select the Move tool. Now you will use the transform option (cntrl + T) and stretch the selection without warping the edges.

Now that you have rounded edges, you can make pill sized jelly buttons or content windows. I'll leave jelly buttons for a different tutorial.

Feb 10, 2010

Rounded corners – Part 1

A lot of sites and even some printed advertisements are using rounded edges for content. It can be extremely useful and adds a lighter sense to a design overall. Illustrator and Flash both have rounded square tools that are very helpful but unfortunately Photoshop does not. There are a few ways to go about getting the effect in Photoshop and the simplest way, I just read from [www.tutorio.com/tutorial/photoshop-round-corners] is to make a selection with the square tool and then refine the edge [select-refine edge] smooth parameter to full. This creates a nice effect but the corners are blurry.
I also found that one can make a rounded edge using the pen tool to create a path but I do not prefer using vectors in Photoshop. Since I am going for speed and the way I use is lengthy and slow but creates a smooth, rounded edge. I manually pull out 6 guides, equally spaced from each other to create a perfect square. I use these guides to form a perfect circle [shift + drag] and then I add box selections to the right and bottom of this circle. This will give a rounded corner of a box. And since this can take a whole 10 minutes, I decided the best practice is to use the actions feature of Photoshop.
I am not including a link on this site to the Actions Set download. Please visit www.tuckers-photography.com for more information. See the Journal page.
Although the scope of this tutorial does not cover ‘Actions’ in Photoshop I highly recommend it for everyone using Photoshop. Learn it, love it and deploy it for amazing results. After you create a few actions of your own, you will understand the power that is nested in this tool. If you work with multiple files or want to re-use a workflow, Actions is extremely valuable.
To use the set of actions, you must install it in your actions folder. I am using a PC, so everything you see is set for PC but a Mac will put this folder in a similar place. Find the “Program Files” folder [may be different for a Mac] and then look for the “Adobe” folder inside. Inside the “Adobe” folder, find the “Adobe Photoshop CS 2/3/4” folder. Inside that folder you will see a “Presets” folder. The “Presets” folder contains a “Actions” folder.
You should now be looking at a number of files that end in ‘.atn’ These are Action sets or folders. These sets appear in Photoshop in the Actions panel but you must first load them in the actions window. Click on the actions window options; see example.
From the drop down menu you will see a group of sets at the bottom. That’s were you set should show up but Photoshop needs to be reset in order to see the folder. Restart Photoshop and you will now see the set if your repeat this step.
Open a file, 300 rez with at least 3 inches by 3 inches. Run the action in the new folder you see. Viola!

Please post a comment if you have any questions.

Feb 8, 2010

Site Update

I am very pleased to announce the finish of my website. There are still some pages that have the dreaded “yellow sign” and need to be finished, but for the most part, the site is now origin specific. No more giant Joomla! logo at the top. The HTML has the correct title in it. There are custom banners at the top. I am happy and all is right with the world.

It did take a bit of time to get it just right. I had some setbacks: a template issue, browser compatibility bugs, and some CSS cleaning. The writing took up most of my time and I still have to proof read the sections. So I still have a lot of work, but I am glad to have the monster off my back.

I will be writing a design tip next for the journal and trying to get the tips I have here in this blog on the site. No more “under construction” blog posts.

Feb 4, 2010

Site Update

I have made a lot of progress with the CMS (content management system) for my site. The load time was cut in half by removing the items that were mentioned in an earlier post. It is about 4/5 seconds now and I will continue to reduce this by shaving some HTML code out of the main template page.

A lot of content was added and the banner was fixed. The banner is tricky and I added more height to it so that I can have better pictures in each banner. It is a random selector which is what I would like. I do not want the same banner in the same section time and time again. In fact, in the future, I would love to just upload new banners and have them display randomly making the site more dynamic as a whole.

I have not researched the shopping cart yet. I also took off the “log in” module which I will have to replace. I feel a lot better about Joomla! now that I have some experience with it. I was very, very close to purchasing a template to spice up my site but after reading further at Joomlashack.com I found that purchasing a template doesn’t include the right to use it on your site.

That’s just bad business. I won’t be using these tactics with my photography and I advise anyone that is starting up a web site or editing/redesigning an existing site, be careful with these people who sell their add-ons and extensions. Their site may look wonderful and have a forum and all sorts of bells and whistles, but there is no real way of knowing if it is legitimate.

Feb 1, 2010

Site Update

My new CMS is extremely slow. It takes about 7 to 8 seconds for the page to load which is too long. I will most likely be removing a lot of the modules to adjust this problem and hopefully that will eliminate the issue. It’s very hard to tell how the site works with all the PHP content. HTML and CSS is easy to change with Joomla! so I’m happy for that. I will be using a custom background repeat image and color combination and I hope to have that updated by the end of the week. I also would like to have the navigation with content for each category [pages?] if possible by halfway through next week. This will help me with my portfolio before Presidents day.