Project Overview

Project 6

In this project your will be introduced to using different code editors. The basic principles of Design Aesthetics will be introduced and basic skills using Gimp and Photoshop will be demonstrated.

With everything in Design, Music, Sports, etc lots of practice and repetition is needed to get comfortable with the new skills you are learning. I do not think it comes naturally to everyone, myself included, and therefore, to gain a better understanding of all these new ideas it takes lots and lots of practice.


Lecture Videos

Lynda.com video: Design Aesthetics for the Web , by Sue Jenkins


Lab Directions

Lab 6

Text Editors
Download and install at least two different text editors. Compare and contrast their functionality and features. Choose a text editor that you like working with and then recreate project three using that editor to gain a feel for the work flow. Take a screen shot of your html and css code in the Editors User Interface showing your author meta tag displaying your name to show that you are using the editor.Like this:
Click for larger view.

image of screen shot showing meta authorship

Over the years I have used a number of text editors for writing HTML code. I do not have a true " favorite editor " , each one come with its own set of features and it really is a personal choice. I am currently using Aptana Studio 3. I like it because it allows me to have a preview of my rendered webpage in the User interface. I have used Adobe Dreamweaver, Crimson Editor etc. It is not my objective to make anyone choose a specific editor. Rather, it is up to the user to choose one they like the features of and get comfortable with.

One feature that Aptana, Brackets, and Visual Studio has is snippets. This is a small pop up window that shows up when you begin to add elements like < header > , < div > etc. It is a helpful tool and speeds up the writing of code. However, you, as the code author, still have to know what you are doing.

A few features that Aptana has, and I am not sure if others do this or not, is it will put small yellow caution symbols on the line number margin on the right to show you there may be an error such as a missing end tag. Also, it allows you to collapse all that is contained within a < div > so you can make sure the hierarchy is accurate. This feature also helps clean up a long page of code so you can focus on the core main divisions without all the little details inside them.

One feature that seems to be missing from code editors is spell checking. Dreamweaver does have a spell check feature and Aptana allows spell check add ons. I recommend using a spell checking tool and I have found this website: https://www.jspell.com/public-spell-checker.html to be a simple easy to use site.

Image editing
To get comfortable using image editing software like GIMP or Photoshop, it takes a lot of practice. Some of the basic skills you need will be to simply resize an entire image or crop an image.
Resizing an image is a process when you take a large image such as a 1024px x 768px image, that is 1024 pixels in width and 768 pixels height, and use the software or change the size to be smaller such as 512px x 384px.
This process does not change the aspect ratio of the image. It simply makes it smaller. The aspect ratio, or the relationship of width and height, remains the same.
Cropping an image is an actual reduction to the original image by removing, or cropping off, some of the picture's actual pixels in width, height, or both. Usually it is a change to the aspect ratio of the image. It changes because you remove parts of the image you do not want. It is done to change the composition of an image to help with it's overall feel by removing unneeded space around the subject. Cropping is not usually done to resize an image.

There are many other applications for image editing software. It can be used to remove unwanted elements from an image such as skin blemishes, Red eye, removal of unwanted background elements, and so much more. But it can also be used in the film industry for visual effects, compositing, digital illustration, movie posters, game content... the list is endless.
For web designers, it can be used as a way to design the look of webpages and layout your structure. It is a great tool to doing the rough blocking in of < div > elements, font choices, proportions, ect. Becoming fluent in the basic tools needed to get the job done is a must for web designers.

Assignment
1) Text editors: Recreate project 3 using a new text editor, such as Aptana, Brackets or Visual Studio. Take a screen shot showing the User Interface with your code that contains the meta tag with author. Name the image " textEditorScreenShot " and upload screen shot image image to Cobra dropbox.

2) Image editors, part 1: Take a large image, such as 1024 x 768 and resize it to be at least half its original size. Upload the original, named " originalImage " and the resized image named " resized image " . Make sure you only reduce the size. Never increase the size of the image because it will look terrible. Upload both images to Cobra dropbox.

3) Image editors, part 2: Take a large image and crop the image to change the composition and focus attention on one core element. Save original image as " cropOriginal " and the cropped image as " croppedImage " . Upload both images to Cobra dropbox.

All content Copyright © 2017 Derek Dallas all rights Reserved