Processing and Exporting Images Doncho Minkov Telerik Corporation Change this with you info

Adobe Photoshop Adobe Photoshop Photoshop Toolboxes Photoshop Toolboxes Must know in Slicing Must know in Slicing Image Formats Image Formats Exporting Images Exporting Images Feathering Feathering 2

Like paint, but better

What is Adobe Photoshop? What is Adobe Photoshop? Image processing tool Image processing tool Maybe the most powerful and used Maybe the most powerful and used A 'Must have' for any kind of Front-end Developer or Designer A 'Must have' for any kind of Front-end Developer or Designer What can PS do? What can PS do? Crop, resize, optimize and correct the colors of digital images Crop, resize, optimize and correct the colors of digital images And it's done easy And it's done easy

It goes something like this… It goes something like this… 5

Parts of Photoshop Parts of Photoshop Menu Menu Tools Tools Documents Documents Indicators Indicators Rulers Rulers 6

Parts of Photoshop Parts of Photoshop Workspaces Workspaces Panels… Panels… Lots of them Lots of them 7

And many many more And many many more Including, but not limited to: Including, but not limited to: Actions Actions Adjustments Adjustments Brushes Brushes Histogram Histogram Masks Masks Swatches Swatches Etc. Etc. 8

80% of the time you need just: 80% of the time you need just: Tools toolbox Tools toolbox Layers and groups toolbox Layers and groups toolbox History toolbox History toolbox Type toolbox Type toolbox 19% of the time you need practice 19% of the time you need practice 1 out of 100 times youll need a designer 1 out of 100 times youll need a designer Its always useful to know shortcuts Its always useful to know shortcuts Like CTRL+N to open a new file, etc. Like CTRL+N to open a new file, etc. 9

Live Demo 10

Tools, Layers and Groups, History, Type History, Type 11

They are your friends, your pals, your mates They are your friends, your pals, your mates But youll hang out mainly with: But youll hang out mainly with: Move to click around Move to click around Marquee to select Marquee to select Crop to reduce size Crop to reduce size Hand to pan around Hand to pan around Zoom to zoom Zoom to zoom The rest are more of a Facebook type of friends The rest are more of a Facebook type of friends 12

Layers are the divs of Photoshop Layers are the divs of Photoshop Groups are … well … other type of divs Groups are … well … other type of divs A group can contain any number of layers A group can contain any number of layers A group can contain other groups as well A group can contain other groups as well You can use colors for visual hints You can use colors for visual hints You can hide layers or groups of layers You can hide layers or groups of layers 13

If you mess up something use CTRL+Z If you mess up something use CTRL+Z Note: Undo and Redo are a bit different than in the rest of the applications Note: Undo and Redo are a bit different than in the rest of the applications Undo toggles between the last two steps Undo toggles between the last two steps You can stage the file and switch between stages You can stage the file and switch between stages Regardless of what goes wrong, you can always revert to the initial state Regardless of what goes wrong, you can always revert to the initial state 14

Use the type tool to get these: Use the type tool to get these: Font name Font name Font size Font size Line height Line height Font weight Font weight Text align Text align Letter spacing Letter spacing 15

Live Demo 16

Not like a piece of pie

Hide all other layers or duplicate in a new file Hide all other layers or duplicate in a new file Crop Crop Export Export 18

Slice this! Slice this! 19

Types of images Types of images Backgrounds and Tiles Backgrounds and Tiles Backgrounds do not repeat in any direction Backgrounds do not repeat in any direction Tiles repeat in at least one direction Tiles repeat in at least one direction With and without transparency With and without transparency Trivial and Tricky Trivial and Tricky 20

Easy to identify Easy to identify Basically select, crop, save Basically select, crop, save Tend to be big in size Tend to be big in size Depending on the case use JPG or PNG Depending on the case use JPG or PNG 21

Easy to identify Easy to identify Sometimes harder to slice Sometimes harder to slice Usually small in size Usually small in size Depending on the case use PNG or GIF Depending on the case use PNG or GIF 22

Live Demo 23

When to use PNG, GIF and JPEG

JPEG is the type of compression, not the format itself JPEG is the type of compression, not the format itself JPEG compression has high level of compression (almost 1:10) JPEG compression has high level of compression (almost 1:10) A little percentage of quality loss A little percentage of quality loss Useful with big images Useful with big images Formats using JPEG Formats using JPEG jpg, jpeg, jpe, jif, jfif, jfi jpg, jpeg, jpe, jif, jfif, jfi Disadvantages Disadvantages JPEG does not support transparency JPEG does not support transparency Loss of image quality Loss of image quality

Graphics Interchange Format (GIF) Graphics Interchange Format (GIF) Rarely used Rarely used Supports only 8-bit colors Supports only 8-bit colors An image can have no more than 256 different colors An image can have no more than 256 different colors Supports animations Supports animations PNG and JPEG doesn't PNG and JPEG doesn't Uses lossless compression Uses lossless compression

PNG is the descendant of GIF PNG is the descendant of GIF PNG supports 24 and 36 bit colors PNG supports 24 and 36 bit colors PNG is high quality image format PNG is high quality image format Supports transparency due to the so called 'alpha channel' Supports transparency due to the so called 'alpha channel' The compression is lossless The compression is lossless Disadvantages of PNG Disadvantages of PNG When the image is with high resolution the image size gets a lot bigger compared to JPEG images When the image is with high resolution the image size gets a lot bigger compared to JPEG images 27

Live Demo

29

Save as: not recommended Save as: not recommended Less options Less options No preview No preview Save for web (and devices): preferred way Save for web (and devices): preferred way Much more options Much more options Preview Preview More than one preview More than one preview 30

31

A typical button may have: A typical button may have: Text Text Icon Icon Shadow Shadow 32

Lets look closer Lets look closer 33

Image parts Image parts One own tile or background One own tile or background Four corner parts Four corner parts Shadow parts Shadow parts Two own tiles side and bottom Two own tiles side and bottom Three corner parts Three corner parts Note: not all buttons have all parts. Some have less, and some have more Note: not all buttons have all parts. Some have less, and some have more 34

Live Demo

Which will tends to happen more than often

Not birdy feathers, but shape feathering Not birdy feathers, but shape feathering Quote: Quote: 37 Feathering is a technique used in computer graphics software to smooth or blur the edges of a feature. The term is inherited from a technique of fine retouching using fine feathers.

38

Live Demo 39

Do you have them?

1. Given the file button.psd create a Web page (HTML + CSS + images) that displays two buttons and a hyperlink: [OK] [OK] [Cancel] [Cancel] View More Information View More Information The buttons and the hyperlink should look like in the Photoshop file. 41

42 2. Given the file shadow.psd create a Web page (HTML + CSS + images) that displays few images (with different sizes) with a shadow. 3. Using the file menu-horizontal.psd create a Web page (HTML + CSS + images) that displays a horizontal menu with hyperlinks.