Monday, March 23, 2015

New Assignment: Portfolio Website

Hello Students,

Your next assignment is to create a portfolio website that documents the skills you have developed in this course, documents the work you have completed and displays your prowess with writing html and css and incorporating graphics into your website. This is your opportunity to show off the work you have completed during this class and display the creative and technical skills you have developed. Your portfolio site must be rich in graphics and utilize the techniques from our previous projects. You are also required to write about yourself and to complete some research and write about your possible future career path, whatever that may be. You may draw upon and incorporate work you have completed any previous ROP class, or can include examples of any work or projects or hobbies that you are particularly proud of.

The organization of this site should mirror the ROP Career Portfolio.  Review the portfolio handbook in detail for tips on writing your letter of introduction and creating the other sections of your website. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio website.

Portfolio Website Technical Requirements:
  • Your portfolio website must have the following sections:
    1. Front page: file must be named index.html for proper functionality. Think of this as the cover of a book about you. This page can contain your letter of introduction
    2. Career Development: This should contain your resume, your career research assignment and your letter of recommendation.
    3. Work Samples: this should include graphic projects, animations, written assignments, lecture notes, artwork, previous website projects, etc. Anything you have created that makes you proud should be included as long as it's content is professional. Written details about each work sample must be included
    4. Contact: This page can contain your email and any other links or contact information, no phone #'s or mailing addresses
  • This project must be created with a text or code editing program such as Komodo
  • Each page must display your web page title or name in the <title> area and self explanatory, such as "Seth Wilsons ROP Web Design Portfolio"
  • Each page must contain the HTML 5 DocType declaration that will enable you to use the HTML Validator, your pages should strive to validate 100%
  • Each page must contain the character encoding meta tag for utf-8 and each page must be formatted for utf-8 when created
  • Each page must contain either graphic buttons or text links to the HTML and CSS validators. Make sure you use the code to validate as HTML 5. Put these at the bottom of the page or incorporate them into your page design so that they are not obtrusive
  • Each page must be formatted with CSS and CSS3 or developed with Bootstrap and each page should be mobile friendly
  • Each page should contain colors for text, backgrounds and link states
  • Each page should use the same font families and use consistent sizing, spacing and style
  • When complete the entire website must be less than 6Mb in file size so it can be uploaded to our servers. 

Portfolio Content Requirements:
  • Have an example of everything required in the ROP portfolio handbook, letter of introduction, letter of recommendation, resume, work samples
  • Take a photo of yourself to include in the front page, this photo can be turned into an illustration with Illustrator or processed with Photoshop if you like. A camera can be provided upon request.
  • Research 1 possible career you are interested in and write a 1 page paper about the career, what does it involve, what is the salary range, what kind of education do you need, how do you break into the career. Include this in your "Career Development" section. You can use career locker for research, ask me for the password for access to career locker.
  • Show your best or favorite work samples in the work samples section of your website, minimum of 3 examples must be shown, more is encouraged. You can include work from other art, design or ROP classes. Write a 1-2 paragraph summary for each work sample.
  • Include your resume and letter of introduction in the career development section if your website. Do not include phone numbers or mailing addresses, only email addresses for contact info.
Design Style:
  • Your website should be professional and clean looking
  • Your website layout should be easy to navigate and text should be easy to read
  • Each page should show the same menu at the top for easy navigation
  • Your website should show good design choices for fonts, colors and style
  • Your website should demonstrate the techniques, skills and abilities you have studies during the course of this class
  • Your website should be viewable on mobile devices
Website Flow/Organization:
Your website must follow the flowchart below as closely as possible...



Meeting the minimum requirements above does not guarantee an A+. You must put the time and energy into the project and really use it as an opportunity to shine. Include more material and content and information to guarantee a stellar grade. Must be original work that you created, create some artwork, take some photographs, make a movie, write a paper... this is your portfolio, make it shine.




How To Add Validation to your website:
Validating HTML and CSS is a great way to demonstrate your coding skills. Use the code below at the bottom of your page to add a validate button to your pages...
This is an example of code to add both HTML and CSS Validate buttons to your webpage
This is how the Validate code above will be displayed, you could also use an HTML5 logo and CSS logo to make graphical buttons for your validators




How Your Portfolio will be evaluated:
  • Contains required content and format
  • Well organized
  • Free of grammar errors
  • ROP related work samples
  • Shows creativity
  • Shows skill development
  • Appropriate for use in job search
  • Professional yet creative appearance
Final Portfolios are due May 6th!

Grading for total of 10 points:
20 Points - Portfolio website meets assignment specs and requirements
20 Points - Portfolio contains all sections
20 Points - Portfolio links work correctly and is error free (including spelling and grammer)
20 Points - Portfolio has no missing graphics or elements
20 Points - Portfolio turned in on time and is awesome and is 6Mgb or smaller

Check out these collections of amazing portfolio sites for inspiration:

Check out these examples of web page portfolio designs from previous students:





Ok, stay focused, work hard and have fun!

 - Mr.W

Friday, March 20, 2015

Gif Animation Challenge!!!!


Hello Students,
Your newest assignment will challenge your animation and creativity skills to the max! Choose one of the challenges below to complete, but choose wisely!

Gif Animation Challenge:
Choose one of the subjects below to animate in the most awesome way evar. You will be graded on the sheer awesomness of your animation:
  • A cat is typing on a computer keyboard and knocks the computer off the table in frustration
  • Ronald Reagan is riding on an ostrich at full gallup and shooting jelly beans out of his eyes
  • Godzilla is a DJ spinning records on a turntable in a dance club
  • A celebrity of your choice removes their face as if it were a halloween mask to reveal a reptilian creature beneath
  • A ferret transforms into a giant godzilla sized monster and begins to wreck a city, knocking over skyscrapers
  • Find a video clip of a celebrity or politician of your choice and rotoscope onto their face Steve Buscemi eyes
  • Find a short video clip of a sword fight and replace the swords with Light Sabers (The shorter the better, trust me on this one... 1 second of video has 30 frames and you have to draw red and blue lines on each frame 1 by 1, this subject is not for the newbies)

LASER CAT COMPELS YOU TO COMPLETE THE GIF CHALLENGE!
Good luck!

- Mr.W



Wednesday, March 18, 2015

New Assignment: Making Animated Gifs

Hello Students,

Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.


What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frameUnfortunately they can't have sound. You can do some really cool stuff with Gif's. Check out Fluxmachine for inspiration.


What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...
This Cinemagraph was created by a photography student in Mr.Wilson's Digital Photography Class at SCHS

Gif Assignment:
Part A
  • Create an animated gif, you can use photographs to make an animation, or a short animation with sequential drawings on paper. You can use found images as well or even short video clips. Think of something simple for the first example... just use your imagination and use this opportunity to become familiar with the gif process
  • Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop. Try a google search and you will find many tutorials and different techniques
  • This is just a quick project to get you used to creating gifs, make sure they are short, not too big in file size and loop forever. Use the Save For Web dialog box in Photoshop to adjust the file size and dimensions
  • This Gif should have at least 10 frames of animation

Part B
  • Create a longer animation this time that loops perfectly. Try creating a character and animating them, you can use photos or cartoons or draw your own with the brush tool in photoshop, just create individual frames of animation as layers, 1 layer per frame... then you can use the layers to frames option in the animation palette sub-menu.
  • You can use photos. Use the Continuous Shooting mode on a camera for rapid fire shooting of frames. A Video camera on a tripod may also be used, photoshop can read some video files
  • Try creating a Cinegraph style animation. Try to create an effect where just one part of the image is moving, such as eyes moving/blinking or the head turns and looks at the camera.

How to make an animated Gif with Photoshop CS5:
  • Launch Photoshop
  • FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
  • Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers with the layer palette that you will turn into frames of animation. Im using some pictures I took of my dog.





  • Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
  • Open the Animation Palette and click on it's Sub-Menu and then select Make Frames From Layers
  • If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
  • You can now designate individual durations on each frame.
  • Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.




  • Open your Gif file in a web browser to test it. Here's my result:



Previous Student Work Samples:
















Tuesday, March 17, 2015

Understanding File Formats

Hello Students,
In this exercise you will practice using the "save for web & devices" feature in Photoshop, a media industry standard when creating compressed images.

Take notes during todays lecture and save them.

File Format Exercise
  1. Right-click on the two images below, save them to your computer and open them in Photoshop
  2. Go to File / Save for Web & Devices
  3. Photoshop has 12 presets, save 1 example of each. Use proper self descriptive file names from low quality to high quality
  4. Compare the results
  5. Repeat step 3 using the VW Bus illustration
  6. Write a short paragraph about your results and answer these questions. Which image has the best quality? Which has the best file size? Which has the best balance of file size and quality and why?
  7. Create a new HTML file, you may use bootstrap or you may create your own CSS for the document.  Create a single HTML page that contains your notes and your assessment of the file formats that you wrote from step 6. Embed the 12 images that you created from low to high quality below your notes and written assessment.



Alias vs Anti-Alias Pixels Explained:
In Photoshop and other bitmap/pixel based programs, Anti-Aliasing is used to give objects a smooth appearance when viewed on screen, it averages the pixel colors to create a smooth transition.

Aliasing is when graphics lack that smoothing, and we can see jagged edges to the object, or "Jaggies".



Contiguous vs Non-Contiguous:
It is important to understand the difference between contiguous and non-contiguous imagery, because different image compression formats are best used for certain types of images.

Contiguous images have subtle color changes from one pixel to another, such as photograph's, paintings, hand drawn sketches or any graphics with a lot of gradients. The JPEG compression codec is best for these kinds of images, that is why most digital camera's save images in the .JPG format.

Non-Contiguous Images have large areas of flat color, shapes and lines. These can be photo's that have been converted to 8-bits, or graphics drawn without anti-aliasing.



Graphic File Formats Explained:
There are a lot of great ways to get confused while using computers - and one of the best is figuring out graphics file formats. As with so many areas of computing, standards for graphic files are great because there are so many to choose from.

They're all different and incompatible, of course, but many programs can load and/or save a wide selection of file formats. By and large, you can tell what kind of file you've got by looking at the suffix - the letters, usually three, after the dot in the filename, otherwise known as the file extension.

Better graphics software actually looks at the file data to determine what kind of file it's dealing with, but Windows software is shamefully deficient in this regard; rename happyface.psd to happyface.jpg and it's likely that the file will become unreadable on any computer.

Below is a list of all (or almost all) graphic file formats... The ones we will use the most are JPG, GIF, PSD, AI and PNG....

ADI - AutoCAD's Device-Independent Binary Plotter Format, a vector format generated by AutoCAD.

AI - Adobe Illustrator's metafile format, which is actually a flavour of Encapsulated Postscript.

AWD - Microsoft Fax At Work format, a black-and-white (one bitplane) format for storing fax images.

BMP - This is the Microsoft Windows bitmap format, also used in OS/2. It's a fairly compact (compression is optional, but usually turned on) format for images up to 24 bit. BMP is the native bitmap format for the Windows environment.

CALS - Computer Aided Acquisition and Logistics Support Raster Format; a longwinded, seldom-seen military-spec two colour document storage format. Used in Pentagon archives, and that sort of thing.

CAM - Casio Camera, the native file format of Casio's QV-series digital cameras.

CGM - Computer Graphics Metafile, an American National Standards Institute/International Standards Organization metafile format for images of pretty much any kind.

CLP - This is the format you get when you save a file from the Windows 3.x Clipboard. It is very, very large, and very very, inefficient - and, what's more, you can only view a CLP file if you're in the same resolution as the person who made it, and are using the same number of colours. CLP is an image format that should never be allowed to touch a disk. Do not use it.

CT - The most popular of the Scitex image formats, Scitex Continuous Tone images are very large and intended for use with Scitex's professional film-printing units, which produce high-grade output for publication.

CUT - The orphaned 256 colour format used by the old Doctor Halo paint program.

DIB - This is an orphaned Windows image format. It stands for Device Independent Bitmap and was part of Microsoft's Great Plan for Windows 95; the DIB code in Win 95 is designed to simplify the creation of display drivers for new video cards by doing most of the grunt work in the operating system instead of in the driver. DIB never really took off.

DLG - Digital Line Graph, a vector format for storing geographical data.

EPS - Encapsulated Postscript is a flavour of Postscript (see below) which can be included in other documents - if your software supports it.

FPX - The FlashPix format, codeveloped by Hewlett-Packard, Kodak, Microsoft and LivePicture Corporation and now an open format administered by the Digital Imaging Group. Kodak uses it in all of their digital cameras from the DC200 onwards. Flashpix's chief claim to fame is that it stores images in multiple resolutions, so a huge, high resolution image can be quickly displayed in miniature on-screen and changes made rapidly to the displayed data only, saving the CPU-grinding full processing for whenever you actually view or output the high resolution version. Of course, this only works if your image editing program supports it, and is not useful for small images. FlashPix images can also be used for Web graphics, because the server only has to send the data being viewed (which seems to the browser like an ordinary JFIF), but since FlashPix doesn't support progressive display like JFIF or GIF or PNG, it hasn't achieved much popularity. FlashPix also has no zero-loss compression option - it either uses no compression at all, and makes a vast file, or uses medium-loss JPEG-type encoding. This makes it a clumsy format for professional use, since lossy compression is a no-no for image editing.

GIF - Graphics Interchange Format (the acronym's officially pronounced "JIF", by decree of the format's creator) is a very efficient, and still quite popular picture format. There are two "flavours" of GIF, the old 87 and the newer 89a. 89a adds several extra features like transparency (so background graphics can "show through" the GIF in places) and animation. GIF animations are a very - some would say excessively - popular form of Web multimedia, because they're small and display on all current graphical browsers without needing a special plug-in or taking up much CPU time.

Unfortunately, GIF pictures can only have 256 colours, or 256 shades of grey. 256 greys is photo quality so GIF is fine for any monochrome image, and 256 colour looks OK for many pictures, but it's no use for professional imaging.

GIF images can also be interlaced, so that you can see a low resolution version of the picture before downloading very much of it. GIF interlacing has four passes, which show one out of every eight lines, then another eighth of the image, then another quarter, then the remaining half. GIF is a data-stream type format, like JFIF, so you can view partially downloaded images whether or not they're interlaced - without interlacing, a 25% downloaded picture gives you the first 25% of the lines, starting at the top.

HRF - Hitachi Raster Format, an obscure, proprietary, one bitplane format used for storing scanner data.

IFF - This is Electronic Arts' Interchange File Format, and is the image format used by Amiga and Atari ST personal computers. There are multiple IFF formats, but by far the most popular are the image and sound file ones. A file with the .IFF suffix may, therefore, be a sound, not a picture - and it might be any one of a number of other types of data. IFF images may also, uncommonly, have the suffix .ILBM, for InterLeaved BitMap, or just .LBM on DOS-based systems.

IFF pictures are not at all efficient, spacewise, but they're fast to display, which was important for poor little Amigas with a 0.7 million instruction per second (MIPS) processor. With current PCs steaming along at hundreds and hundreds of MIPS, this no longer matters at all.

IFF is peculiar in that it has two odd variants - HAM and HAM8. HAM stands for Hold And Modify, and is a technique the original Amiga designers came up with for getting 4096 colours from hardware which, traditionally, can only display 32 at once. HAM8 is the updated version, which displays 262,144 colours on 256 colour hardware. No non-Amiga computer can display HAM images exactly as they're meant to be seen, but some conversion programs can display them as 256 or higher colour images. If your display program isn't smart enough to do this, it'll assume it's loading an ordinary 32 or 256 colour image and give you a distinctive multicoloured porridge on screen. There are some very strange IFF variants which use whole different palettes on every line; pray you never meet one.

All IFF images can be compressed or uncompressed; just about all are compressed. The compression, like the whole format, is built for speed, not efficiency, and so doesn't reduce the size much.

IMG - This is the format used by the old GEM Paint program; it only works in 256 shades of grey.

IMG - See "PIC".

IMJ - A proprietary variant of the JFIF format created by Pegasus Image Corporation.

JBG - Also suffixed JBIG, this is the Joint Bilevel Image Group's data compression and transmission format.
JBG is a way of sending one-bitplane document images so that a low resolution version arrives first, then extra data to "fill in" more and more detail. Not an image format as such - a JBG "file" is just a JBG data stream dumped to disk.

JFIF - The JPEG (Joint Photographic Experts Group) File Interchange Format, commonly called JPEG and with the filename suffix .JPG, can be the most efficient image storage method of all - at a price. First to the name. Everybody might call these images JPEG, but that just describes the type of compression used for the data; it doesn't describe how the compressed data is sorted and stored. Calling JFIF "JPEG" is like calling a Ford Falcon "internal combustion".

The idea of JPEG is that as it compresses the data it throws some of it away - technically, this is called "lossy compression". You can configure how lossy you want your JFIFs to be (well, you can if you're using even a slightly well written JFIF saver); 100% quality gives you almost exactly the same result as the original picture but also gives you a gigantic, uncompressible file. 10% quality takes up much less space but looks dodgy. You have to strike a balance.

JFIF can store up to 24 bit colour, so it's suitable for professional use, and it can do interlaced display like GIF (called "progressive" JFIF), which along with its small file sizes makes it the standard format for Web graphics. Like GIF, JFIF is a data-stream format - you can view images before you've got all of the data. Also like GIF, JFIF supports interlacing.

The JFIF format also supports CMYK (process colour - Cyan, Magenta, Yellow and blacK in a subtractive colour model, as against the additive Red, Green and Blue more commonly used) images, which makes it suitable for use in publishing applications. CMYK this support was added in a later version of the standard, though. This means that quite a few JFIF display applications, including Web browsers, do peculiar things when fed CMYK images. There's no reason to use CMYK JFIFs unless you're sending the image to a CMYK output device, which a monitor definitely isn't. Usually, CMYK ones get through because someone's converted a CMYK image of some other format, like TIFF, without changing the colour model.

JPG - See JFIF and SPF.

LBM - See IFF.

MacPaint (3k) - Usually suffixed .MAC, this is the format used by the ancient original black and white Macintosh paint program. Two colours only, 576x720 resolution only, thankfully rare.

MNG - The proposed Multiple Network Graphics (pronounced "ming") format is a multi-image extension of the existing PNG format - or it will be, if it ever makes it out of the design stage.

MSP - Microsoft Paint was the early PC answer to MacPaint, and its format is just as boring. Two colours only.

PCC - see PCX.

PCD - Kodak's PhotoCD was going to set the world alight, with happy snappers having their film scanned and the high-resolution images written to CD, to access via PC or special PhotoCD players. Amazingly, it turned out that nobody was very interested in viewing their photos on their TV, and PhotoCD flopped miserably in the consumer market. It survives as a somewhat popular professional image storage format; a genuine PhotoCD has a particular directory structure containing the images, stored in five resolutions. An ordinary PCD file can be read by any application that can read the format, but unless it's on a CD with the right structure, a PhotoCD player won't recognise it.

The PhotoCD storage process is proprietary to Kodak, who no longer sell the software to make full multi-resolution images.

PCX - The ZSoft Paint format, occasionally suffixed .PCC, is ancient but still fairly widely used, simply because everybody understands it. There are three common versions, 0, 2 and 5; 0 is the original two colour one (small but not useful), 2 only does 16 colours and is hence also of little interest to owners of rather old video cards, and 5 does 24 bit. All are large for what they do, but fast to load on elderly computers. PCX is the IBM equivalent of Amiga IFF. The size listed is for v5, at full 24 bit; v2 scored 216k and v0 48.1k.

PIC - A few proprietary (one company makes software that supports them, and nobody else does) image formats use this suffix. They are not interchangeable. Some programmers need a good slapping. PIC is most likely to be the 256 colour format of the old PC Paint program, but it might also be a Micrografx Draw! vector file, a Lotus vector file, a Pegasus Imaging Corporation image file or an image file for General Parametrics' Video Show Film Recorder.

PICT - Pict is the all-in-one Apple Quickdraw metaformat. It can include bitmapped or vector images, and can use different compression schemes.

PNG - The Portable Network Graphics format, pronounced "ping", was created as a free replacement for GIF, whose LZW compression is owned by Unisys and which can't be included in commercial software without paying license fees to the owners. It handles 1 to 48 bit images, and is a lossless, well-compressed format like GIF. It still isn't very popular, though.

PS - Adobe Systems' Postscript isn't an image format, per se - it's a page description language, originally conceived so computers could send very accurate page descriptions to the then-new high resolution laser printers. You can save black and white or even colour pictures as Postscript, but you'll end up with a very large file. Postscript is not a very efficient format, but its advantage is it's all plain text - you can modify a Postscript file with any text editor, if you know what you're doing.

PSD - Adobe Photoshop's native format, which stores all of its layer and selection and miscellaneous other image data.

RAS - This is SUN Raster format, the default image format for monster SUN workstations. Only lighhtly compressed and so a rather large format, but it supports up to 36 bit images.

RAW - This may be a Photoshop RAW file, which is a PSD file with no identifying header. Or it may be a minimally formatted image data dump - see PIC.

RGB - See "PIC".

RIX - The orphaned bitmap format of the old DOS ColoRIX paint program.

RLE - This is an antique CompuServe or Windows Run Length Encoded compressed image format, which only support 256 x 192 black and white images.

RTF - Microsoft's Rich Text Format, which is normally used as a well-understood cross-platform word processing document format, but which can store pictures as well as text. As image storage formats go, though, this one's as bloated as Postscript.

SPF - SPIFF, Still Picture Interchange File Format, the "official" International Standards Organisation Joint Photographic Experts Group (ISO JPEG) image format defined in the recent Part 3 extensions to the JPEG standard. SPIFF offers more features than the current JPEG standard and is backwards compatible (a JFIF decoder can understand most SPIFF images), but has not yet achieved much popularity. SPIFF files may also be suffixed .JPG.

TGA - The real name for this format is just plain "TGA" or "Truevision File Format", but a lot of people call it "Targa", after the Truevision video card that first used it. There's a lot of this name confusion in image file formats. It supports 1 to 32 bit images and professional features like an alpha (mask) channel, gamma settings and a built-in thumbnail image.

TIF - TIFF (to give the full acronym) stands for Tag Image File Format; many people say Tagged for the first word, which is technically incorrect but minimally important. TIFF was a large, unwieldy, 24 bit format until version 6 came out, which supported compression and made it less painful. Mind you, the fact that its compression was somewhat broken and might or might not be compatible with different programs on different computers somewhat reduced the bonus, and the further fact that the compression is LZW and thus owned and licensed out by Unisys (see GIF) is another pain. TIFF is, nonetheless, a very popular professional graphics format.

WMF - This is Windows Metafile format, which is an intermediate vector format for Windows programs to use when interchanging data and, generally speaking, should never be seen anywhere else.

WPG - This is the WordPerfect metafile format, used by WordPerfect software on various platforms. It supports bitmapped, vector and Encapsulated Postscript data.