The activity was very fun and interactive, it allowed me to set my imagination free and get creative as all sorts of ideas were rushing through my mind. It became more fun and challenging with the limited time set to draw on the sheet of paper. Though I would have expressed myself better if there was more time. At last we got to see how everyone has their own way of depicting and perceiving things.

The mood board can include samples of images, fonts, colors, graphics, patterns, grids, screenshots, basic texts and its layout is important.

As per its name the mood board sets the mood and allows to interpret ideas visually.

This is a mood board that we have created to reflect the overall look, feel and personality of our HephX sculpting business.

 Pixels per inch (PPI) is used for image resolution {Monitor/Display resolution}.

Image Resizing: Changes the size the image will print without changing the number of pixels in the image.      In photoshop, with the resample dialogue box unchecked the image is being resized. Resizing Images by changing the width, height and/or resolution values in the document size section of the image size dialogue box is used for print. (unit of measurement is set to pixels).

Image resampling: Physically changes the number of pixels in the sample.                                                           With the sample box checked ,the image is being resampled. Resampling images by changing the width and height values in the pixel dimension section of the image size dialogue box is primarily used when optimizing images for the web.

Pixel Dimension: Tells the width and height of the image in pixels, and the file size of the image.{web}

Document Size: Tells how large or small the image is going to print based on image resolution.{print}

[interpolation : the process where the number of pixels is increased in volume]

Joint Photographic Expert Group uses lossy compression. The image is compressed to make a smaller file, the compression does not create loss in quality. JPEG format is ideal for web use and non-professional prints, e-mail and PowerPoint. The amount of compression when saving in image editing programs can be chosen. It is commonly used for raster images.


GIF (.gif)

Graphics Interchange Format is commonly used for web graphics. They are limited to only 256 colors in the RGB color space , they have a small file size do to this limited number of colors and are also portable. They load very quickly compared to other files.GIF files allow for transparency and can be animated. They have a lossless compression with no loss of information

PNG (.png)

Portable Network Graphic format is good for interactive documents but not suitable for print. They are of lossless image format ,can be compressed without loss of quality but are still low in resolution. They were designed to improve upon and replace the GIF format. They can handle up to 16 million colors ,can save transparency , makes for a much sharper and web-quality image.

When a JPEG is compressed it loses some original information, hence categorized as lossy. Upon comparison with its original file noise, blur, color and sharpness loss can sometimes be noticed. GIF and PNG on the other hand, are lossless because they retain their true color values. Supporting only 256 colors the images should be compressed else it will be too large. These files compress better than JPEG files. File optimization may only be required when matching the background color, fitting an image to the edge or if image transparency is necessary. Only GIF and PNG support transparency. In AP, optimization can be controlled and its percentage can be adjusted  in the quality box.GIF and PNG have to constrain their colors within the 256 color range using only web-safe colors. This can be adjusted in the color reduction algorithm section: perceptual, selective, adaptive or restrictive option can be selected.

Website optimization is the process of using tools, strategies and methods to improve a website's performance and that others can have the best user experience from that particular website. Web optimization is like updating and helps the page be noticed when end users search for similar relevant terms.  SEO (search engine optimization) is the process of increasing website traffic through search engines, making the site more noticeable. The SEO gives consumers a better chance of coming across your website. Image optimization can also help increase this search engine optimization.

Page load is the amount of time taken for a page to show on user screens. Low website speed is one of the most annoying things that end users encounter. This is where optimization comes in handy. Web optimization helps reduce time load and makes a positive impact for user experience. Well performing websites result in high return visits, low bounce rates, higher search ranks, and better experience.

Images are always on the spotlight of the websites, however, they are usually large files that are uploaded and tend to slow down the website's performance. Optimizing the images will compress the file size without compromising its quality. The image is refined and this lightens the web page while also reducing page load time. Image optimization helps lessen the burden of network resources for instance data usage in mobile devices.

Saving images in SVG format is a good alternative in web optimization. SVGs can be scaled up and down without distortion. They are usually smaller in file size and have the ability to use animation and transitions on layers (web friendly ). SVGO can be used in this case to process and optimize files eliminating unnecessary elements. One can also optimize images for the web by rescaling raster images, picking PNG performance, using CDN, Image caching, compression and using animated GIFs moderately. Testing, evaluating and modifying is essential to ensure a well performing website.

Web page optimization, slicing, Image optimization are all crucial for a good and proper functioning website. It equally promotes business and should be taken into great consideration.

Website optimization is the process of using tools, strategies and methods to improve a website's performance and that others can have the best user experience from that particular website. Web optimization is like updating and helps the page be noticed when end users search for similar relevant terms.  SEO (search engine optimization) is the process of increasing website traffic through search engines, making the site more noticeable. The SEO gives consumers a better chance of coming across your website. Image optimization can also help increase this search engine optimization.

Page load is the amount of time taken for a page to show on user screens. Low website speed is one of the most annoying things that end users encounter. This is where optimization comes in handy. Web optimization helps reduce time load and makes a positive impact for user experience. Well performing websites result in high return visits, low bounce rates, higher search ranks, and better experience.

Images are always on the spotlight of the websites, however, they are usually large files that are uploaded and tend to slow down the website's performance. Optimizing the images will compress the file size without compromising its quality. The image is refined and this lightens the web page while also reducing page load time. Image optimization helps lessen the burden of network resources for instance data usage in mobile devices.

Saving images in SVG format is a good alternative in web optimization. SVGs can be scaled up and down without distortion. They are usually smaller in file size and have the ability to use animation and transitions on layers (web friendly ). SVGO can be used in this case to process and optimize files eliminating unnecessary elements. One can also optimize images for the web by rescaling raster images, picking PNG performance, using CDN, Image caching, compression and using animated GIFs moderately. Testing, evaluating and modifying is essential to ensure a well performing website.

Web page optimization, slicing, Image optimization are all crucial for a good and proper functioning website. It equally promotes business and should be taken into great consideration.

Similar to a lettermark, a wordmark or logotype is a font-based logo that focuses on a business’ name alone. 

A pictorial mark (sometimes called brand mark or logo symbol) is an icon—or graphic-based logo.

An abstract mark is a specific type of pictorial logo.

Mascot logos are logos that involve an illustrated character.

A combination mark is a logo comprised of a combined wordmark or lettermark and a pictorial mark, abstract mark, or mascot.

An emblem logo consists of font inside a symbol or an icon; think badges, seals and crests. 

Logo shapes can :

Triangles can suggest excitement and growth

Circles indicate love, comfort, and connection.

Squares convey strength, courage, and discipline.

When creating logos :

An effective logo is :

The connection between the Golden Ratio and works of art and architecture has been questioned in the last few decades, but there is no question that the Golden Ratio has fascinating ties to the Fibonacci numbers, two- and three-dimensional geometry, and more.

It is  a mathematical ratio and commonly found in nature. It can be used to create organic-looking, visually-pleasing compositions. It is also known as the Golden Mean, The Golden Section or the Greek letter phi, it can be deployed to bring structure and harmony to projects.

Approximately equal to a 1:1.61 ratio, the Golden Ratio can be illustrated using a Golden Rectangle. This is a rectangle where, if you cut off a square (side length equal to the shortest side of the rectangle), the rectangle that's left will have the same proportions as the original rectangle.

Remove the left-hand square from the rectangle, you'll be left with another, smaller Golden Rectangle. This could continue infinitely. Similarly, adding a square equal to the length of the longest side of the rectangle gets you increasingly closer to a Golden Rectangle and the Golden Ratio.

This relates to the Fibonacci Sequence (0, 1, 1, 2, 3, 5, 8, 13, …) , in which each term is the sum of the previous two. Plotting the relationships in scale provides us with what's know as a Golden Spiral. This occurs organically in the natural world.

The principle of it is to break the image into thirds, both horizontally and vertically, leaving you with 9 frames. These frames serve as guidelines as to where you should place subjects of interest in your image, either at the intersections or along the lines.

The main subject (or a point of interest) should be placed at the intersections between the frames. This may be at the lower or upper right or left intersections. By placing the elements at these spots a more visually pleasing image is created.

Horizontal/Landscape photos: The subject’s eyes or focus to be in the right or left third.

Vertical/Portrait photos: The subject’s eyes or focus is in the top or bottom third.

It is essentially used to create equal weight across the canvas.

In other words during spot coloring  colors of the design are applied individually, and eventually the whole design in covered up. Process coloring applies all ink colors to the design at the same time.

Full color printing  is also known as digital, process, CYMK and four color printing.

Each process color is compromised of percentages of cyan, magenta, yellow and black inks.

Process colors provide a limited color range when compared to spot colors.

spot color has a large color range, it has much better consistency, it can provide more vibrant and detailed colors.

Spot color printing is suitable when accuracy and consistency is involved. It features a large color gamut than process colors, and makes more distinct colors possible(hues, fluorescent) 

There are several spot colors to choose from, the most common is the Pantone Matching System. Pantone is one of the proprietary color management system. Pantone colors mixes from a foundation of its 18 base colors; their inks are combined in a precise way to form their own range of spot colors.

process color allows for full color matching, more flexibility and a  wider range of color blending abilities.

Process printing is ideal for jobs that require multi-colored inks to produce an image/design. It is best when accuracy and consistency are not top priority. Process printing produces high quality results but has a risk of color variation across different printers.

It gives you a variety of fonts to choose from just by adding the style sheet link in the <head> section and then referring to the font in the CSS.

Google Fonts :

The basic format : <link rel="stylesheet" type="text/css" href="">

For multiple Google fonts use a pipe character (|) to separate the font names.

Ajax allows you to update a web page without reloading the page, request data from a server(after page is loaded), receive data from a server(after page is loaded)  and send data to a server (background).

Ajax is not a programming language but in fact a technique for accessing web servers from a web page.

Ajax uses a combination of

 -A browser built-in XMLHttpRequest object (to request data from a web server)

-JavaScript and HTML DOM (to display or use the data)

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. 

Ajax does makes use of the browser's built-in XMLHttpRequest (XHR) object to send and receive information to and from a web server asynchronously, in the background, without blocking the page or interfering with the user's experience. 


How AJAX works:

1. An event occurs in a web page (the page is loaded, a button is clicked)

2. An XMLHttpRequest object is created by JavaScript

3. The XMLHttpRequest object sends a request to a web server

4. The server processes the request

5. The server sends a response back to the web page

6. The response is read by JavaScript

7. Proper action (like page update) is performed by JavaScript

Easing refers to the way in which a motion tween proceeds. You can think of easing as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, then build up speed, and then stop suddenly. Or, the object can start off quickly and then gradually slow to a halt