Archive for April, 2012

A Short Course on Adobe Photoshop and Web Graphic Design – Part 2

The second day of the short course is mostly on web design. The day started with a discussion on the 9 essential principles of effective web design. The document below summarizes the discussions made during the lecture:

An Exercise of Putting Things Together

We were asked to design a webpage for a made-up Iphone App. To set -up Photoshop for Web designing, our instructors gave us the following pointers:

  • For web designing, set the Photoshop page dimensions to Web of size 1024px by 768px.
  • Use the Photoshop’s Rulers (Ctrl+R) and Grids (Ctrl+’).
  • Set fonts and line heights. Nowadays, the standard text size of websites is 13 to 14 font size.
  • Set the color scheme of your design. A useful color scheme reference is found at

This is the design I made using Adobe Photoshop.

The design I made using Adobe Photoshop

To translate the above design into a webpage, we need to do HTML and CSS programming. The instructor gave a quick lecture on html and CSS programming. We were given sample HTML and CSS files so we can work on our own. Below are the sample programs I made to create the webpage.

Inside index.html


<link rel=”stylesheet” href=”style.css”/>



<div id=”wrap”>

<div id=”column1″>

<div id=”logo”>

<img src=”images/logo.jpg” />

</div> <!– end #logo –>

<div id=”text”>


<p> Technology in the world today is changing, adapting and moving so fast that it is sometimes hard to keep up. You only need to look at how we go about sharing and acessing information to see that we truly are living digital. I see the Digital Age as various applications and technology allowing quick communication globally. This ultimate apps shapes how we gather, access, retrieve and share information.

</div> <!– END #text –>

<div id=”apps”>

<img src=”images/appstore1.png” />

</div> <!– end #apps –>

</div> <!– end #column1 –>

<div id=”column2″>

<img src=”images/iphone.png” height=”550″ width=”250″ />

</div> <!– end #column2 –>

</div> <!– end #wrap –>


List of image files under the Images subfolder

Header Image File

Header Image File (header.jpg)

The Logo

The Logo Image File (logo.jpg)

The App Store Image

The App Store Image File (appstore1.png)

The Iphone Image File

The Iphone Image File (iphone.png)

Inside style.css








repeat-x #3d7888;



margin:0 auto;

padding:180 0 0 0;




padding:0 0 0 220;





margin:0 0 50px 0;



padding:40 0 0 0;



padding:0 220 0 0;







.clearfix:after {

content: “.”;

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;


.clearfix {

display: inline-block;


html[xmlns] .clearfix

display: block;


* html .clearfix {

height: 1%;


The App Page

The resulting Iphone Apps Page looks like this:

Screenshot of The App Page

Screenshot of The App Page

Lessons Learned

What I have learned from this short course is that it is possible to learn Adobe Photoshop and Web Design in a short time.  But, it was not easy to have everything in two days. That is what I wrote as my recommendation in the training’s feedback form. It would be better if the training facilitators to extend the course program three days to allow participants more time to do the exercises.

With regards to what I have learned from this training course, I need further practice to fully grasp the knowledge and the know-how in using Photoshop. I have a basic background in html programming and that help me to cope with the programming part of the exercise. Still, I need to restudy HTML and learn CSS programming.  With more practice and training, I can create well-designed websites in the future.

If you are interested in designing and developing websites, I recommend that you take this course.


Web Graphics Design Resources:

Sample websites:

Training course information:

Dates: March 26-27, 2012
Registration Fee: PhP 2,250

Instructor: Mr. Martin Cipriano,
Facilitator: Mr. Gerald David
Philippine Trade Training Center,
Tel. No: (632) 468-8962