Random PS tips

Watching this training dvd Photoshop CS5: One on One Fundamentals by Deke Mclleland for Lynda.com.
Will be posting random useful tips I encounter.

Adjust brightness/contrast quickly and easily:
Go to image> adjustments > brightness/contrast.
Holding shift while scrubbing allows you to adjust by increments of 10.
When a value is selected, it can be adjusted using the up and down arrows on the keyboard.

*With two images open in side by side windows it is possible to drag both at once by holding down the shft+spc bar keys then dragging one image


Adjustment layers
Open an adjustment layer by opening up the adjustment layer panel and double-clicking on desired option.
To name adjustment layer when opening it, hold down alt then click on option within the adjustment layer panel.
Save an adjustment layer by saving the jpeg as a psd file.
If jpeg is needed for the save then you can save as a copy, by turning off layers in the save documents dialogue.
You can use the mask which comes with adjustment layers to select areas where the adjustment doesn't affect, example use the quick selection tool to select the area, then fill selection with black (alt+delete) to create this effect.
Possible to select portion of desired area then going to select > similar for automated selection.
The layer mask density can be adjusted in the masks panel.

*Here is a little before and after using a black and white adjustment layer with a mask to allow some areas to keep their color.

after











before












Using the histogram
Open up the histogram panel in Windows.
Click on corner of panel to open up the expanded view.
Making changes to the adjustment layers will simultaneously change the histogram. The objective is to have a balanced histogram as much as possible.

Adjusting the hue/saturation selectively
Open up a hue/saturation adjustment layer.
In the adjustment pane, select the color you would like to adjust the hue for.
Scrub the various channels to change the color.
It is also possible to choose the color target adjustment tool and scrub directly on the image to change the color of something specific eg clothing.

Making selections:
Pressing bkspace after selecting objects is a shortcut to bring up the content aware fill panel.
Fade fill is done following a content-aware fill by going to edit > fade fill. 
To find exact center of image: select all (ctrl A) > select move tool > select show transform controls. Point will show up in the exact center, and ruler guidelines can be snapped to the images.
When using the elliptical marquee tool, draw circle from the center outwards by starting in the approximate center of the image, start the circle then hold down alt and drag.
To soften the edge of a selection, go to select > modify > feather.
Make a graduated selection by using the feather option. Select the region > go to select > modify > feather and choose a large radius depending on what extent you want the selection to be feathered. 
After adding a new image to a document, you can match the color by going to Image > adjustments > match color.

Text effects!!!!!

Yes I know its 1:34 am but I was playing around in PS and stumbled across this technique so I'm blogging about it quick before I fall asleep and completely forget how I achieved it!

So I've got this Alien Skin plug-in for PS, and one of my favourite features of this plug-in is that it allows you to use Extrude to create 3-d text. However, I have always been frustrated by the fact that I couldn't apply a gradient or pattern etc to a font that I wanted to extrude. Well low and behold, I just got this brilliant idea, tried it and it worked like a mu.....

Step 1: Type out the word(s) to be extruded.

Step 2: Duplicate the text layer.

Step 3: Apply the extrude filter to the duplicated text layer.

Step 4: Delete the duplicated layer.

Step 5: Move the original text layer over the layer with the extrude, use the keyboard arrow keys to make sure that they are perfectly aligned.

Step 6: Apply your choice of gradient overlay, pattern etc to the text layer.

Step 7: Once this is done, use the CTRL key to select the extrude layer and the text layer, and merge the two layers and voila b*tches!!! 3D text with a gradient on the type face!!

Here is my first example, it's not refined or color co-ordinated but it shows that this ish works!







A few minutes later after some tweaking....

Ok so I've been playing around a bit more. I find that sometimes the edges may not align perfectly as in the above example with my name. One solution to this I have tried and it works is to add a stroke to the text layer before merging the layers. This stroke should be the same color as the extrusion, this is easily accomplished using the color picker.

Here is a second, more refined example for y'all:






 A whole 'nother level

 Yup. I decided why not? More experimentation. Decided to try out this effect using a clipping mask. Wrote my text, dropped in my image, clipped that ish out, duplicated my text layer, added my extrusion, added a stroke to the text layer, merged all layers, added a drop shadow to the final product, and came up wit this son of a b-word!!






PS: Don't underestimate the usefulness of YOUTUBE!!!

Another effect I always wondered how to do was how to add a gradient or other effect to the extrustion itself. Well I Youtubed it and got an excellent tutorial here by IceFlow Studios.

Basically you type your text using a nice blocky font. then you hold Alt and then press the down and direction keyboard keys to copy the layer repeatedly. Then you merge all the copies, and place the original text layer over this layer. After that, you are free to add a gradient or other effect to the layer below. Here is a simple example:

A banner for my blog

So I'm here writing my final blog entries for MC25B and then I just realized that my blog doesn't even have a halfway-decent banner!! So I decided, why not make a quick banner and blog about the process, so here goes!

Laying the ground work

A quick check into the blogger layout section and I found out that the banner should be 692 pixels wide.

I've opened up Photoshop and created a document 692 px wide and 200 px tall.

Next I open up bridge to look for suitable vectors which could complement my design. I've come across a vector of a man holding an umbrella and surrounded by question marks, almost as if its raining questions. I think this should do just fine.

Next, I create a simple light blue background. The vector I open in Illustrator then copy and paste into Photoshop. I place one of these on the left, duplicate the layer and place the other on the right.

Type Effects

First I typed my text in the center of my document. The word Various on the top line I sized at 15 px and on the bottom line I typed the word Musings at a font size of 25 px. The font I am using is named Masterplan and I downloaded it for free from dafont.com

My next step was to apply a stroke. Instead of a solid stroke I applied a gradient stroke to my text layers.

Next I applied a drop shadow to both text layers with the spread on 100% and the blend mode on normal.

The final step of my type effects was to apply a warp to both layers.

Finishing touches

Some paints splashes were added to give a bit of flavour to the blog name.
Finally I added yet another vector, this time a post it with tape attached. On this note paper vector I wrote in Arial font: A Tech Blog by Chad Ambo

All that's left now is to save my banner and upload it to blogger! Before I do that though, here's a screen shot of it in Photoshop CS5.

Creating my website photo gallery

In my last post, I explained how I created the Flash design on the homepage of the DSAJ website. In this post, I focus on creating my website gallery which was more challenging and way more time consuming than I initially expected it to be.

My gallery made use of a Jquery lightbox which I obtained from this site. Fortunately, this free lightbox came as a download pack which included all the elements necessary for implementation including sample images, css and html files and of course the jquery scripts.

Preparing images in Photoscape

I started using Photoscape to crop and resize images last summer while I was working for Dominicanewsonline.com. Each image had to be resized twice, and since I was initially dealing with over 50 images this was painstaking, tedious and time-consuming. The thumbnails images were resized to 250x250 px while the larger images were sized down to a width of about 600 pixels.

Implementing the Jquery Gallery

In my website I had two images folders. One folder carried my images such as the banner and GIFs displaying text which I used for image replacements. The other folder I named galleryImages and this folder contained all the thumbnail and larger pictures to be used for my gallery page.

Using dreamweaver, I linked to the jquery scripts and the lightbox CSS in my head of my gallery HTML, as seen in the picture below. Initially there was some conflict, but this was resolved by going into the lightbox.js file and ensuring that it was calling images from the galleryimages folder instead of the images folder which was the original setting.

*linking to the jquery in my gallery html document

I then followed to the letter the installation instructions found on the How to Use section on the web page the lightbox was downloaded from. This resulted in my gallery html source code looking like this:

To get the images to work with the lightbox, the main requirement was to include the code rel=lighbox   in the link to the images.

Image Replacements

Two instances of image replacement was carried out on my gallery page to name the gallery. I created transparent GIFs in Photoshop and then placed them as background image behind the text they were replacing. I then used CSS to do a text indent and indented the texts to -10000 pixels so that they moved off the screen.

*image replacement in my main.css

*images used for image replacement:

Getting my ish online

The simplest step but also the most time consuming. I used the file manager system on webs.com. Unfortunately because I was using a free account, I had to add each image individually so this took quite a bit of time.

I also had to upload all of the jquery scripts in their js. folder, the lightbox css, my gallery html etc. In the end though, I had this working gallery which I am pretty proud of!

Flash Catalyst CS5

In order to build my website for my final assignment for MC25B I used several of the CS5 applications including Dreamweaver, Photoshop, Illustrator and the spanking new Adobe Flash Catalyst CS5. This application allows you to convert your designs from Photoshop and Illustrator into interactive web content quickly by doing the actionscript for the user behind the scenes. You can find out more about Flash Catalyst CS5 here.

While I'm familiar with Flash Professional, the interface for Catalyst is completely different so I went to the Adobe website and watched a few tutorials on how to use the program. Eventually I came across this straightforward demonstration of use of Catalyst which I used to guide me to create the flash seen on the home page of my DSAJ website.

In this blog post I will recap the steps I took to create my DSAJ website flash.

Starting in Photoshop

I opened a document in Photoshop which was the exact size that I needed the Flash to be to fit into the designated space on my home page.

In order to move elements around in Catalysts from a PSD file, they need to be on their own layer.
Most of my design elements came from my vector library.

Using Bridge to browse for appropriate elements, I then opened the ones I selected in Illustrator, selected them individually and copied and pasted these on separate layers in Photoshop.

I also downloaded the Dominican and Jamaican flags using Google image search. I encountered a problem here because both files were GIFs and I was unable to drag and drop them into my PSD. This problem I solved by selecting them with the rectangular marquee tool, then switching to the move tool in PS and then dragging the selection into my PSD.

Once I had my images I added my text, selecting the Pricedown font becuase I think it best suited the typographic look I was aiming for. I added contrast to my text by giving the word Dominica the green color of the Dominican flag (using the eye-dropper tool), and gave the word Jamaica the yellow color taken from the Jamaican flag. Each word was placed on its own layer to allow me to move them around in Catalyst.

Moving over to Catalyst

Flash Catalyst allows you to add a PSD or AI file to work from, and all the individual layers will be available in the application for manipulation.

I imported my PSD into Catalyst however I quickly noticed that my text came out very jagged. This vexing problem was eventually only resolved by importing my text as non-editable images instead of as editable text which is the default option.

*screenshot from Catalyst with my PSD document opened

 




In Catalyst, states is the term used to describe the different stages of the Flash that the viewer will eventually see. I named the state with the unadjusted document end.

I then moved the elements on the various layers to different positions on the outside of the document so that they would come in from different directions. This state i named start.

I then used the timeline panel and for synchronized each element to transition from the start state to end state in one second, and for the elements to follow each other in one second intervals instead of all coming in at the same time.

I changed the start state to the default state so that in a browser this would be what the viewer saw first.

The next step was to add the interaction. Using the panel below I selected add Interaction > On application start > Play transition to state > End.

*interaction panel

The final step was to publish my Flash for deployment to my website. I went to File > Publish to SWF/ Air. I then chose the directory I wanted it published to, and keeping the default options I selected Publish.

Moving my flash into Dreamweaver

This was the simplest step. I simply selected my main content div in code view of my website in Dreamweaver where I wanted to place the flash.
Then I copied the code from the html document document which is automatically published together with the SWF, and pasted it into my website html, and voila....'Flash-ism'!!

Conclusion
Flash Catalyst does not eliminate the need for Flash Professional, however many of the things which were unwieldy and time-consuming in Professional is now a breeze in Catalyst. I have obtained a training DVD on Flash Catalyst from Lynda.com which I plan to follow during the summer to learn about the full potential of Catalyst.

Design Typography

Today I downloaded and read through two very informative e-books; The Non-designers Design Book by Robin Williams, and Art Design in Photoshop by Steve Caplin. I decided to read up on design and specifically typography before I started my design for my DSAJ website, which is the final project for MC25B. Each book contained unique and useful information, and I will just highlight some of this here.

Non-designers Design Book

The typography section of this book was very interesting. Some excerpts:



Art design in Photoshop

This book had some good information about what NOT to do in typography. For example:





Both of these books also have tutorials, I plan on trying out one now, and according to how it goes I might blog about it.