Wednesday, April 14, 2010

Customizing a Campaign monitor template

I have just finished customizing a newsletter for JamGrub as part of my Electronic Publishing course.

So this mini-project wasn't for MC25B, but the stuff I was doing definitely required me to call upon my multimedia skills. To customize the template, I was required to make use of Illustrator (replacement vector images), Photoshop (prepare and save these images for the web properly) and Dreamweaver ( to do the image replacement, adjust CSS, add information and links to the HTML)

The template was downloaded from the site http://www.campaignmonitor.com/templates.

I downloaded template 7. It came as a zip file which I unzipped, and found that the folder contained an HTML file with the CSS contained in the head, stock images, and the PSD file which was used to design the template.

I replaced the stock images with images of my own. These replacement images were taken from the blog posts, and resized using Photoscape.

I then deleted the stock images which came with the templates and made the changes to the html file so that the newsletter would call my new images instead.

A bit more complicated was replacing some of the design elements of the newsletter such as separators. I used Photoshop to open documents the same size as the already existing ones, copied and pasted vector images from Illstrator to Photoshop, and then using the save for web dialogue in PS, I saved these as PNGs with transparency. I then changed the HTML to call the new images.

Once I had the design and images customized, I had to input text which I simply copied and pasted from the blog posts. I also inserted the URLs to the individual pages of the site which could be accessed by clicking 'Read more' after the introductory passage of each story in the newsletter.

Here is a before and after of the template

BEFORE:



After:

Monday, April 5, 2010

More Photoshop shortcuts etc




Easter weekend, nothing else to do than watch Lynda.com training videos. What a life.

Been jumping from one to the other, started two Joomla dvds and never finished, browsed through a wordpress dvd, and now i've decided to go through this Photoshop CS4 Essential training dvd. I know most of this stuff but what I'm learning is some real cool keyboard shortcuts I had no idea existed. So I'm going to record them here otherwise I'll forget them in a day or two.


Scrolling through blend modes:
Select the layer you want to blend.
Select the move tool.
Hold down shift and then use the + and - to toggle the blend modes.


Adjusting opacity
Select the layer
Choose move tool
Use numbers on keyboard 1-9 to adjust opacity.

Working with masks
Make a selection on the image to be masked at edge
Go to the masks tab above layers panel to adjust the density etc of the masks.

Cropping
Possible to hide the cropped out part of image rather than delete by selecting delete in crop options.
Going to Image>reveal all, will show content that was hidden if cropped this way.
Selection tools can be used to select a part of an image to be cropped as well.

Straighten an image by cropping
Choose the ruler tool which is behind eye dropper tool.
Click on horizon, and drag to select it.
Go to image>image rotation>arbitrary.
Click OK to rotate image.
Use crop tool to select portion that is straight.
*Photoshop can do this automatically for several images on one layer. Go to File>Automate>Crop and straighten photos.

Transforming images
Control + t on image allows it to be transformed.
Hold down control to distort image.
Hold down ctrl+alt to skewer image
Hold down ctrl+alt+shift to change perspective.
Warp image by choosing warp option (top right of screen).

Smart objects
Convert image by right clicking on name of the layer in the layers panel and selectiong convert to Smart Object.

Content aware scaling
Select this feature by going to Edit>content aware scaling.
Choose 'protect skin tones' icon to protect someone's face while scaling.
To protect complete subject, select the person using selection tool eg magic wand > go to select menu and save the selection> Deselect the selection(ctrl+d) > go to channels panel to view the alpha mask which was created> before scaling, uncheck protect skin tone> go to protect and choose the alpha which was created> click the check mark to commit to the scale> remove extra area of canvas by going to image menu and choosing trim the transparent pixels.

Adjusting type
To select text and hide highlight over selected area: ctrl+h.
To align text on separate layers: use ctrl to select both layers> select the move tool> choose appropriate align eg align left edges.
To alter size of text from the center while constraining the proportions: holt alt+shift while dragging from a corner point.

Layer styles
While in drop shadow dialogue, click on the image and drag to adjust the shadow.
Hold down alt and drag to copy style from one layer to the other.
Save a style by selecting styled layer, and go to styles panel and select new style.

***Adjust hardness or softness of brush by holding shift and hitting left bracket.

Combining similar images with change in subject.

Open the images in bridge and select both by ctrl-clicking.
In PS, go to tools>PS>Load files into PS layers
Align images in PS by going to edit>auto align layers and then choose auto.
Create layer mask on top layer.
Use brush to remove subject on top layer and reveal same subject below.

**Pressing alt+0169 gives copywright sign in bridge

Some typography shortcuts in PS