rent the web
check-in design
the green birdie

Request a Guide

Somerset Design Blog

October 24th, 2009

Hey everyone,

Welcome to our new blog we hope you find some useful information on here. This design blog has been setup by a web design company based in Somerset to offer useful tips and guides to people interested in learning about web design and development. Our guides will build up over time and you even have the option to request a guide if you want to know how to do something we have not yet listed.

We will do our best to keep these guides updated on a regular basis and try to add new ones as often as we can. Guides being requested will be reviewed and if suitable for our blog we will put some info up regarding the request.

Have fun browsing the site and we look forward to hearing some of your comments.

Regards

The Design Blog Team

Photoshop Basics

October 23rd, 2009

Photoshop Basics

What is Photoshop?
Photoshop is a powerful image editing tool that is used mainly by professionals to manipulate images. The most
basic tasks will be covered in this handout e.g. cropping, adding text and arrows to an image.

Access

Photoshop can also be purchased and installed using a CD.

Getting Graphics to Work With

Photoshop will work with almost any type of graphic file you can find. There are several ways to capture images if
you don’t have something to work with.

A. Scanning
See separate handout on scanning images and importing into Photoshop.

B. Screen Shots
One of the simplest ways to take a picture of what appears on your computer screen is to create a screen
shot.

PC Users
Mac Users
• Go to page you wish to capture using your web
• Go to page you wish to capture using your web
browser.
browser.
• Press the “Print Screen” button on your keyboard.
• Press Command-Control-Shift-3
(This is usually on the top right of your keyboard.)
• Open Photoshop, and choose “File New” from the
• Open Photoshop, and choose “File New” from
menu. The new file should automatically default to the
the menu. The new file should automatically default
size of your screen.
to the size of your screen.
• Click “OK,” then choose “Edit Paste” to paste the
• Click “OK,” then choose “Edit Paste” to paste the
screenshot into your new Photoshop file.
screenshot into your new Photoshop file.

C. Saving from the internet
You can also save images directly from a web-site through your web browser.

In Netscape:
• Position the mouse pointer over the image you want to save.
• Right-click with the mouse (Mac users click and hold over the image).
• Choose “Save Image As…” from the popup menu.

In Internet Explorer:
• Position the mouse pointer over the image you want to save.
• Right-click with the mouse.
• Choose “Save Picture as…” from the popup menu.

Scanned and saved images retain the format and size of the original. Photoshop allows you to change the size and
orientation of images to make them more suitable for your presentation.

Resizing an Image
• From the menu bar go to Image Size. A dialogue box will appear.
• From the dialogue box choose the size you would like your image to be. You can specify the size in either
Pixels or Inches. You only need to change one dimension. Photoshop will automatically keep the image in
proportion.
• Click “OK” after changing image size to see your results.

Note: You can always make an image smaller without losing any image quality. Trying to make an image larger
than its original size can result in a blotchy mess.

Rotating an Image
Sometimes, due to their size, images have to be scanned in sideways. This is easily corrected by rotating the
image.

• From the menu bar choose Image Rotate Canvas.

• Choose one of the pre-set rotations: 180°, 90°CW
(CW=Clockwise), 90°CCW (CCW=Counter Clockwise),
Flip Canvas Horizontal, or Flip Canvas Vertical;

OR

• Choose your own angle of rotation via “Arbitrary.” A
dialogue box will display.

• Specify the degree of rotation, and select °CW or
°CCW.

• Click “OK” to see your results.

Modifying Images Using the Toolbox Palette

When you open Photoshop, a tool called the Toolbox Palette will appear on the right side of your work space. The
Toolbox Palette provides quick access to many of the basic functions you will need to modify images in Photoshop.
You can reposition to Toolbox Palette by clicking and dragging it to a new position in your Photoshop workspace.

Cropping an Image
The crop tool crops out a rectangular selection of your image and throws away the rest of the image information.

• Select the crop tool
from the Toolbox Palette.

• Click on the image and drag to select the area of the
image that you want to keep. The areas of the image
that will be removed are grayed out.

• Once you have made the initial selection area you can
resize by dragging the handle boxes of the selection
area.

• Once you are satisfied with your selection area press
“Enter” on the keyboard to crop your image.

There are several tools in Photoshop that are used to select an area of an image. The most commonly used are the
Marquee Selection tool
and the Magic Wand
.

To make a selection with the Marquee tool:
• Choose the Marquee tool from the Toolbox Palette.
• Click and drag over the area of your image that you would like to select. A box outlined by dashes will show
you the area you have selected.

To make a selection with the Magic Wand tool:
The Magic Wand selects by color.
• Choose the Magic Wand from the Toolbox Palette.
• Click on an area of the image. The Magic Wand will automatically select a range of contiguous similar colors
in the image that you have clicked on. Your selection will be shown by an outline of dashes. The sensitivity of
this selection can be altered by increasing the “Tolerance” setting located in the tool options palette at the top
of your workspace.

Once you have an area selected you can fill it with color.
• First select the color that you want to fill it with by clicking on the Color Picker on the Toolbox Palette.
• Clicking on the top square will bring up the color picker for the foreground. Click on the color that you

would like in the spectrum and click “OK” The foreground color square should now be the color you
have chosen.
• To fill the area you have selected, go to Edit Fill from the top menu bar. Choose “Foreground
Color” from the Contents drop down menu.
• Click “OK” to see your results.

Adding Arrows to Your Image
• Select
the
Line Tool
from the Toolbox Palette.
Note: The line tool may be hidden on the flyout menu of shape tools. If this is
the case, click and hold on the Tools icon with the left mouse button to access
the flyout menu.

Once you have the line tool selected you must add arrowheads to the line before
drawing.
• Choose arrowheads by clicking on the Custom Shape Tool in the tool bar at the
top of the Photoshop desktop.
• Click on the drop down arrow on the tool options palette and choose if you want
arrowheads at the beginning, end or both of the line.
• Click and drag on your image to add the lines with arrowheads.

Adding Text to Your Image
• Select the Text Tool
from the Toolbox Palette.
• Click on your image where you would like to add the text.

You can change the text font, size, and color from the tool options palette at the top of the Photoshop workspace.

To change the color of the font:
• Click on the color square to bring up a color picker spectrum.
• Click in the spectrum on the color you would like the font to be.
• Click “OK” to see your results.

Note: If you are changing the color, font or size of existing text that you added you must first select the text using the
text tool and then make the desired changes.

Note: Text is added on a separate layer on the image (look on the layers palette on the bottom right of the
workspace) Make sure that layer is selected to edit the text. Otherwise the image layer must be active to make edits
to the image.

Using Layers

Remember any time you add new text or draw a new arrow it will be added in a new layer on top of the image. To
change or reposition any of these elements you must have the layer in which it appears selected from the layers
palette. You are only able to edit what exists in the layer you have active.

You can also delete layers by selecting the layer and clicking on the garbage can on the bottom right of the layers
palette or simply click the garbage can icon after selecting the layer.

Saving Your Work

Note: Save the graphic you are working on in Photoshop format (.PSD) as well as your final output format. This will
enable you to go back and work on it later.

Graphic Formats
There are certain formats that are best for different types of images.

• Photoshop (.psd) – this file type is the native file type for Photoshop. Saves all the image information and
remains editable without losing quality.
• JPEG (.jpg) – this file type is best for photographic quality images. 16.7 million colors. Softens edges, smears
type
• Compuserve GIF (.gif) – best for illustrations, line drawings, logos and text. 256 colors. Hard edges
• BMP (.bmp) – good for use in print. Retains most of the image information. Can be large file size.

To save your file and convert it to an appropriate file type:

• Go
to
File
Save As from the top menu
bar in Photoshop.
• In the save as dialogue box click on the
“Format” drop down menu to choose the
format.
• Click on the “Save” button to save your
image. There may be some follow-up pop-
up boxes for each specific format, the
default settings should be fine most of the
time.
• Click “OK” to finish.

Inserting graphics into your presentation

In Microsoft Word:
In Microsoft Powerpoint:
• Open your Word document.
• Open your PowerPoint presentation.
• Using the top Tool bar, go to
• Using the top Tool bar, go to
Insert
Picture
From File”
Insert
Picture
From File”
• Navigate to where you have saved your picture.
• Navigate to where you have saved your picture.
• Select the file and click the “Insert” button.
• Select the file and click the “Insert” button.

PHP For Designers

October 23rd, 2009

Why PHP?

There is no “right” language for every single purpose. Like wrenches in a toolbox, different programming languages lend themselves to being particularly well-suited for specific uses, although each could be massaged into handling most tasks. Choosing the right language for the job is a decision I make on a daily basis. There are compelling reasons why I usually choose PHP over another server-side scripting language such as Perl or XSSI:

It’s easy to set up. In many hosting environments PHP is set up as a module, which is a technical way of saying that if you have a file with the .php extension it will generally execute PHP code without having to change file permissions or put it in a special directory like cgi-bin. This is not universally true, but it’s the common denominator for hosts that support PHP.

Embedding bits of PHP code inside primarily XHTML pages is easy.

PHP is portable. PHP can run under Apache or IIS or thttpd on Windows or Linux or BSD or… you get the idea. This increases the value of your code and also increases your hosting mobility.

PHP is popular. Surveys show it be the most popular Apache module ever, and Apache is the most widely used Web server.

PHP is cheap. Free, actually. PHP is open source software, which means a lot of things but most importantly means that PHP is a well-supported and stable platform that is available for low- or no-cost to anyone who wants to use it. You can run PHP (and Apache and MySQL) on your home computer or on thirty enterprise servers for the same price.

Those are the objective reasons. Subjectively I think that PHP is great for getting work done elegantly and fast, is easy to learn, and has a wealth of freely available code, scripts, and documentation.
Syntax

PHP code is always contained between the wrappers . These indicate to the PHP engine that whatever is inside those starting and closing tags should be interpreted as PHP and nothing else. There are several alternate methods of indicating the same information to the PHP engine, but these are either non-standard or hinder compatibility, so for our purposes we will always use .
Comments: Say something

Comments are where you write things you don’t want executed. A single line comment may begin with two forward slashes, and nothing on the rest of that line will be interpreted by PHP. You can have multi-line comments by enclosing them between /* … */, which some of you may recognize as the comment syntax in CSS. PHP comments are great because they aren’t output to the browser at all, which can be useful when you want to make a comment for future reference, for example:

 

is more dangerous than

 

In the second example the comment will never be seen by an end-user, even if he views the HTML source. The importance of commenting your work cannot be overstated. Things that may seem obvious to you today may be opaque a year from now when they need updating. Useful comments (not silly like the one above) can save you hours and usually only take seconds to write, if you write them as you go along. Don’t tell yourself you will go back and comment things later, because chances are you won’t.
Variables: Store it

Variables are places to store information. Variable names always start with a dollar sign and then have the variable name, which can have letters, numbers, or underscores but can’t start with a number. When naming variables it is best to use succinct names that are straightforward and communicate the variable’s content.

$weather = 'Bright and sunny.';
$age = 20;
$favorite_music = 'Jazz';
?>

You will find that your variable names may need to contain more than one word. There are two ways to do this: the first is called camelCase, where the first word is lowercase and subsequent words have their first letter capitalized; the second way is by using underscores to separate the words. Both are popular, and ultimately it comes down to personal preference. I prefer the underscore method because I find it easier to read with space separating words rather just a case hump. More important than which style you choose is sticking with it and giving descriptive yet short names to your variables.
Quoting and Escaping

In XHTML, attributes must be closed within quotation marks, which may be single or double quotes. This is useful because in PHP we assign strings to variables using quotes. If you use a quote of the same kind inside the string, then it must be escaped. For example:

$link = “Example“;

As you can see we had to escape the quotes inside the string with backslashes. However taking what we know about quoting we can clean this up:

$link = “Example“;

Although single and double quotes are interchangeable in XHTML, they aren’t in PHP. Double quotes tell the PHP engine to interpret any variables it finds in the string, and single quotes tell PHP to handle the string literally. For example:

$number_cds = 42;
echo "I have $number_cds CDs.";
?>

Output: I have 42 CDs.

$number_cds = 42;
echo 'I have $number_cds CDs.';
?>

Output: I have $number_cds CDs.

Using single quotes where possible results in nominally faster execution, but we’re talking fractions of milliseconds.
Functions

PHP has hundreds of built-in functions available for you to use. Functions take a number of arguments separated by commas and do something or return something. For example the date() function can take a string of characters and output a formatted string. To output the current year we could use:

Output: 2004

How do I know that Y formats as 2004 (this year)? I looked it up quickly by typing in php.net/date which took me immediately to the reference page for the date() function. If there wasn’t a function named date, it would do a search and take me to the search results instead. This method of using the php.net Web site makes a great quick reference.
Ending Lines

We are going to finish our brief syntax overview exactly like you should end statements in PHP, with the semicolon. When you tell something to PHP, such as , the semicolon tells it the statement is done.
Execution

Now it’s time to do something useful with what we’ve learned so far. How many HTML pages have you seen that have something like this at the bottom?

Copyright © 2001-2003.

It’s pretty standard, but when it’s out of date it can look very unprofessional. Besides, after partying away New Year’s Eve, who wants to spend the next day updating the copyright dates on dozens of pages? We already know that we can echo out the current year using the date function, so lets update our example to use that and a proper en dash:

Copyright © 2001–.

The PHP code was easily embedded, and now you never have to worry about updating that year again.

If all your pages have a .html extension and aren’t set up to parse PHP code and you don’t want to have to rename every file and update every link to use the .php extension, here’s a quick line you can put in your .htaccess file (assuming you use Apache and can have a .htaccess file) to have all .html and .htm files parsed by the PHP engine.

AddType application/x-httpd.php .html .htm

3 column CSS template

October 23rd, 2009

Three column layout

Step 1 – Start with the semantically marked up code
To lay out a page into three columns, you need to start with the basic page structure. In this case we will use some dummy content to create the three column template. The page has been grouped into six separate divs, and each of these divs has been given a unique ID selector. The divs are labeled; “container” (wrapped around the entire page’s content), “top” (for the top banner), “leftnav” (for the smaller, left column), “rightnav” (for the smaller right column), “content” (for the main content) and “footer” (for the footer across the bottom of the page).

Step 2 – Add width and margin to the container
To get the content to sit in from the edge of the browser window (or viewport) we need to set width and margins on the main div that wraps around the content.
#container
{
width: 90%;
margin: 10px auto;
}

Step 3 – Add color, background color and border
To add color and background color to the main div, use “background-color: #fff;” and “color: #333;”.

background-color: #fff;
color: #333;
border: 1px solid gray;

}

Step 4 – Add line height

To increase readability, you can increase the overall line-height of text. If it is applied to this main div, it wil cascade down throughout all divs
The rule can be written as “line-height: 130%;”.
line-height: 130%;

Step 5 – Styling the top banner

To style the top div, we will set a background color, padding and a border across the bottom. The three declarations will be: “padding: .5em;” to add padding to the div, “backgound-color: #ddd;” to add a background color and “border-bottom: 1px solid gray” to apply a border to the bottom of the div.
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

Step 6 – Remove margins and padding from the h1

Inside the top banner there is an H1 tag. We want the words to sit .5em in from the top and left edge of the div. Browsers add different amounts of padding above an H1, it is easiest to remove all padding and margin from this H1 and let the div provide the padding. This is achieved by using a decendant selector – “#top h1 { padding: 0; margin: 0;}”.
#top h1
{
padding: 0;
margin: 0;
}

Step 7 – Apply “float”, margin and padding to the leftnav

To float the left nav, we need to use the rule: “#leftnav {float: left;}”. When a div is set to float, a width must also be included, so we can add another declaration: “width: 160px;”.

Next, we set the margin to “0″, add 1em of padding (which will move the text away from the edges of the div).
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

Step 8 – Apply “float”, margin and padding to the rigthnav

To float the “rightnav” div, we need to use the rule: “#rightnav {float: right;}”. Like the “leftnav” div, we add a width, margin and padding.
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

Step 9 – Setting margins to the “content” div

This next step is the most important of the entire process. The “leftnav” div has been floated, so text from the “content” div will flow down its left edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the “content” div, making sure that the width is greater than the overall width of the “leftnav” div. In this case, we will use “margin-left: 200px”, which will give us 40px margin between the leftnav and the main content. The same is done to the right side.

We will also apply a border to the left and right of the “content” div. This could be a problem if the “leftnav” div is longer than the main content. If this is the case, the border can be applied to the right side of the “leftnav” div instead of the “content” div.
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
}

Step 10 – Add padding to the “content” div

To add padding to the content div use “padding: 1em;”.
padding: 1em;

Step 11 – Styling the footer

To style the footer, we first need to set it to “clear: both”. This is critical, as it will force the footer below any floated elements above. We then add “padding: .5em” and “margin: 0″ .
#footer
{
clear: both;
margin: 0;
padding: .5em;
}

Step 12 – Add color and background color to the footer

To add color and background color to the footer use the following declarations: “color: #333;” and “background-color: #ddd;”.
color: #333;
background-color: #ddd;

Step 13 – Adding border to the footer

To add a border to the top of the footer use: “border-top: 1px solid gray;”.
border-top: 1px solid gray;

Step 14 – Removing top margins

To remove the space above content in the “lefnav”, “rightnav” and “content” divs, use the following rules: “#leftnav p, #rightnav p { margin: 0 0 1em 0; }” and “#content h2 { margin: 0 0 .5em 0; }”.

Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragaphs and headings seperate from elements below them.
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

Step 15 – Setting a maximum line length

If you want to set a maximum width on your main content, you can do this by adding a new rule: “#content2 { max-width: 36em; }”.

Although IE browsers will ignore the rule, other standards compliant browsers will not allow the content area to go wider that 36em – keeping the line length to a comfortable width.
#content { max-width: 36em; }

Beginners Guide to HTML

October 23rd, 2009

What is a Web page? What, in brief, are Web pages capable of doing?
A Web page is an Internet “document” that can be accessed by Internet users with an HTML browser (such as Netscape or Microsoft). By providing the browser with a unique address, or Uniform Resource Locator (URL, variously pronounced “you-are-ell” or “earl”), you open the page with that address. Web pages commonly provide text, pictures or other graphics, and links to other pages. Newer technology also allows Web pages to provide three-dimensional images, animated images, and sound.

What does HTML stand for? What is it?
HTML, or Hypertext Markup Language, is a language that uses text and a defined set of commands (known as tags) to create most of what you see on a World Wide Web page. The tags can serve two distinct functions: They either “tell” the text how to behave (bold, italic, etc.), or make the text act as a command to insert a link, picture, or sound onto your page.

What is the best way of going about learning HTML?

Reading helps, and so does practical experience; we recommend a combination of both. You should start by finishing off the rest of this page–it gives you a manageable-sized portion of answers to questions you may have. You’ll undoubtedly have more complicated questions as you learn more.

One the best ways to learn HTML is to see how other people have done it! Using your favorite browser, find your favorite page. Then look for the “Source” or “Document Source” command under the “View” menu. This will show you a window with all of the HTML used to create that page. Look it over; more times than not, you’ll be surprised at the relatively few commands it took to put together what seemed at first like a complicated page!

What do I use to write HTML? Is there a specific piece of software?
The easiest way is to use a WYSIWYG (what you see is what you get) Web page creation program, which operates much like a word processing package and (with a bit of your help) not only writes your HTML for you, but also helps you put together your page from start to finish. These programs are especially useful for those who don’t have the time or the inclination to learn all the nuts and bolts of HTML, but you should at least have a cursory knowledge of HTML before using them.

Once people start working in HTML on a production level, they often use HTML editors, which have special features (such as automatically inserting closing tags; see below) that make HTML work fast and easy for people who know what they’re doing.

HTML files are basically simple plain ASCII text files that can be created with any text editor such as BBEdit for Macintosh, or Notepad if you are using Windows. If you don’t want to invest in either of these programs, you can use your word processor program of choice; just make sure that when you save your document, you save it as “text only with line breaks,” and make sure the filename ends in “.htm” or “.html”.

What are the required elements for an HTML document? Can you show me an example?
Every HTML document does require certain tags in order for it to work. All of the basic tags work in pairs; whatever tag you use must have a matching end tag in order for the browser to denote the beginning or end of a style or command. The only difference between the beginning and ending tag in the pair is that the / must be used with the second, or closing tag. All tags must be surrounded by < and >, but are not case-sensitive; that is, typing in HtmL will be read by the computer the same as HTML.

Search