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 colorschemedesigner.com.

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

<head>

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

</head>

<body>

<div id=”wrap”>

<div id=”column1″>

<div id=”logo”>

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

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

<div id=”text”>

<h2>MOBILE APPS FOR THE NEW AGE TRAVELLER</h2>

<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 –>

</body>

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

body{

margin:0;

padding:0;

font-family:arial;

font-size:12px;

line-height:18px;

color:#fff;

background:url(images/gradient-background.png)
repeat-x #3d7888;

}

#wrap{

margin:0 auto;

padding:180 0 0 0;

background:url(images/header.jpg)
no-repeat;

}

#column1{

padding:0 0 0 220;

width:480px;

float:left;

}

#logo{

margin:0 0 50px 0;

}

#apps{

padding:40 0 0 0;

}

#column2{

padding:0 220 0 0;

height:300px;

width:339px;

float:right;

}

#footer{

clear:both;

.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:

http://www.lipsum.com/
http://colorschemedesigner.com/
http://www.alistapart.com/
http://kuler.adobe.com/
http://www.google.com/webfonts

Sample websites:


http://www.gotmilk.com/
http://www.immersive-garden.com/
http://thisisaportfolio.com/
http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials-photoshop-tutorial/
http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/

Training course information:

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

Instructor: Mr. Martin Cipriano, http://www.thisisaportfolio.com
Facilitator: Mr. Gerald David
Philippine Trade Training Center, http://www.pttc.gov.ph
Tel. No: (632) 468-8962

Advertisements

6 responses to this post.

  1. Hi Kenneth. Galing nito, ah. 🙂

    Reply

  2. thanks Ann! 😀 practicing and planning to add a portfolio page for my graphic designs soon.

    Reply

  3. Excellent web site you’ve got here.. It’s hard to find good quality writing like yours
    these days. I truly appreciate individuals like you!
    Take care!!

    Reply

  4. Posted by Christopher Isaac Manuel on July 11, 2014 at 4:30 pm

    sir,active pa po ba yung training? and how much did you pay and how many days?thankyou

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: