Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Basics of Photoshop Step-By-Step
How Photoshop can be used for Website Development.
PSD to HTML conversion

Published in: Art & Photos, Technology
  • Be the first to comment


  1. 1. NuevoThoughts TechnologiesGraphic Design and PhotoshopMade By: JiteenDate: Shubhendu’s DAY
  2. 2. NuevoThoughts Technologieswww.NuevoThoughts.comGETTING STARTED WITH PHOTOSHOPAgenda of the Presentation :•What is Photoshop : An Introduction•Opening, Closing & Saving PSD•Tools Palette•Layers & Layer Palette•Common Effects•Creating a Website using Photoshop
  3. 3. NuevoThoughts Technologieswww.NuevoThoughts.comWHAT IS PHOTOSHOP ?Photoshop is basically a PHOTO EDITING SOFTWARE introduced by a US Basedcompany ADOBE in 1989.The latest version of Adobe Photoshop is CS 6.It is available in over 20 Languages (but not in HINDI... DISCRIMINATION)FILE FORMATPhotoshop files have default file extension as .PSD, which stands for "PhotoshopDocument." A PSD file stores an image with support for most imaging optionsavailable in Photoshop.
  4. 4. NuevoThoughts Technologieswww.NuevoThoughts.comCreating a Photoshop DocumentTo start working in Photoshop, we need to create a document.Photoshop Document can be created by 2 Methods :Method 1 : Method 2 :File >> New Ctrl + nSelect the Dimensions of the Document in Pixels/inches and check for the MODE asRGB for Colored or Grayscale for Black & White
  5. 5. NuevoThoughts Technologieswww.NuevoThoughts.comClosing a PSD DocumentTo CLOSE the PSD document, just Click the CLOSE button at the extreme TOP-RIGHTof the window. And it will ask you to save changes (if not saved)Saving a PSD DocumentThere are 3 methods to SAVE the PSD.METHOD 1 METHOD 2 METHOD 3Close the document & Go to FILE >> Save As Ctrl + SIt will ask you to save data
  6. 6. NuevoThoughts Technologieswww.NuevoThoughts.comAdobe Photoshop
  7. 7. NuevoThoughts Technologieswww.NuevoThoughts.comTOOLS PALETTEThe TOOLS PALLETE is the set of toolsavailable in Photoshop.It is placed in the Extreme Left, if notthen you can get it by:Window >> Workspace >> Reset palette1. Palette can be broadly divided into :1. Selection Tools2. Coloring Tools3. Drawing Tools4. Transformation Tools5. Background Color Tools
  8. 8. NuevoThoughts Technologieswww.NuevoThoughts.comMOVE Tool & MARQUEE ToolThe MOVE tool is used to Move an object/shape or a part of object from one placeto other either within a document or to the other document.The MARQUEE tool is used to SELECT the particular area of the document in arectangular/elliptical/row/column shape only. This changes the area of your imagethat is affected by other tools or actions to be within the defined shape.
  9. 9. NuevoThoughts Technologieswww.NuevoThoughts.comLASSO Tool & QUICK SELECTION ToolThe Lasso tool is used to select the area of the document in FREESTYLE (Lasso Tool),STRAIGHTENED (Polygonal Lasso Tool), GUESSED (Magnetic Lasso Tool).The Quick Selection Tool is used to select the area that is similar to the currentposition of the clicked area. It is also Known as MAGIC WAND TOOL.
  10. 10. NuevoThoughts Technologieswww.NuevoThoughts.comEYE DROPPER Tool & CROP ToolThe EYE DROPPER tool is used to select the specific color sample of the image.Color Sampler can select up to 4 colors.The CROP tool is used to Crop the area required. It selects in rectangular shape.
  11. 11. NuevoThoughts Technologieswww.NuevoThoughts.comBRUSH Tool & SPOT HEALING ToolThe BRUSH tool is used to make a paint brush effect and is used to make free handdrawing. Also, there are numerous brush patterns available in beautiful patterns.The SOT HEALING BRUSH tool is used to eradicate any imperfection from the imageby replacing it by the perfect background.
  12. 12. NuevoThoughts Technologieswww.NuevoThoughts.comCLONE Tool & HISTORY ToolThe CLONE STAMP tool is used to create a Xerox of the selected area (alt+click) tothe desired area (where the mouse is clicked upon).The HISTORY Brush tool paints the copy of the selected state into the current imagewindow.
  13. 13. NuevoThoughts Technologieswww.NuevoThoughts.comERASER Tool & GRADIENT ToolThe ERASER tool is used to Erase the unwanted part of the image.Background ERASER tool is used to erase the Background Layer of the Document.The GRADIENT tool is used to make a Gradient (combination) of the colors foreffective banners etc. The BUCKET TOOL is used to add a single equally distributedcolor.
  14. 14. NuevoThoughts Technologieswww.NuevoThoughts.comBLUR, SHARPEN & SMUDGE ToolThe BLUR tool blurs the image , SHARPEN tool sharpens the soft image while theSmudge tool smudges the area under the Brush.
  15. 15. NuevoThoughts Technologieswww.NuevoThoughts.comDODGE & BURN ToolsThe DODGE tool makes the image more lighter, it makes the shade lighter.The BURN tool makes the image more Darker, it makes the shade darker.
  16. 16. NuevoThoughts Technologieswww.NuevoThoughts.comPEN & TYPE ToolsThe PEN tool is used to draw very smooth edges and at different angles which arevery difficult in Free hand drawing.The TYPE tool is the tool used to Type TEXT. The text could be of varied sizes, andstyle. There are various FONTS available to be downloaded on internet.
  17. 17. NuevoThoughts Technologieswww.NuevoThoughts.comPATH SELECTION & SHAPE ToolsThe PATH SELECTION tool is used to draw shapes like PEN tool, but it also showsanchor points, direction lines and points.The SHAPE tool is used to make predefined shapes. CUSTOM SHAPE is the optionwhich allows you to choose many other shapes other than geometrical as well.
  18. 18. NuevoThoughts Technologieswww.NuevoThoughts.comROTATE & ZOOM ToolThe ROTATE tool is used to Rotate the image in X-Y coordinates.The ZOOM tool is used to Get a Zoomed/enlarged view of the image to get the basicdetails of the image.
  19. 19. NuevoThoughts Technologieswww.NuevoThoughts.comORBIT & HAND ToolThe ORBIT tool is a 3D rotate tool that rotates the image along its Coordinates.The Hand tool is used to move the image within the window.
  20. 20. NuevoThoughts Technologieswww.NuevoThoughts.comFORE/BACK GROUND ToolThe TOOLS PALLETE is the set of various tools available in Photoshop.It is placed in the Extreme Left.This is placed at the bottom of the palette. From here the color can be chose.
  21. 21. NuevoThoughts Technologieswww.NuevoThoughts.comLAYERS PALETTE
  22. 22. NuevoThoughts Technologieswww.NuevoThoughts.comLAYERS PaletteThe LAYERS Palette is placed in the Right Bottom of the Window.The LAYERS Palette comprises of three sub-parts :•LAYERS•CHANNELS•PATHS
  23. 23. NuevoThoughts Technologieswww.NuevoThoughts.comADDING, DELETING & HIDING a LayerThe TOOLS PALLETE is the set of various tools available in Photoshop.It is placed in the Extreme Left.Click on the second from Click on the First from Click on the icon at theRight option to Right option to left of the layer toADD a new layer. DELETE the layer HIDE/Un-HIDE the layer.
  24. 24. NuevoThoughts Technologieswww.NuevoThoughts.comLIQUIFY EFFECTSOne of the most important effect in Photoshop is to LIQUIFY.It is used to change the looks of the image by Twirl, Pluck, Boat etc effects.Goto FILTER >> LIQUIFYForward WrapTwirl ClockwisePucker MirrorPush LeftBloat
  25. 25. NuevoThoughts Technologieswww.NuevoThoughts.comA few EFFECTS in PhotoshopNORMAL Glass in Frosted ModeZIG ZAG WAVE SPHERE
  26. 26. NuevoThoughts Technologieswww.NuevoThoughts.comLet’s take a
  27. 27. NuevoThoughts Technologieswww.NuevoThoughts.comWeb Page Layoutusing PSD
  28. 28. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 1 : Designing the StructureCreate a raw structure of the webpage to be created, using penand paper.
  29. 29. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 2 : Defining the StructurePrepare the well-defined structure of the layout. This will be theexact structure to be followed throughout.
  30. 30. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 3: Getting Started on PSCreate a new Page with suitable Dimensions and colour andRGB mode.
  31. 31. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 4 : Prepare the MENUThe MENU is created as a wide bar with Grey-White GRADIENT.
  32. 32. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 5 : Making the HEADERA light coloured Violet-White Gradient is made to place for theslider and other header contents.
  33. 33. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 6 : Adding Menu ITEMS & LOGOUsing the TEXT tool, Add the ITEMS to the Menu and add theLOGO (image or Decorated Text).
  34. 34. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 7 : Decorating the HeaderAdd images and text to Decorate the Header. Using Effects,make the Header more attractive.
  35. 35. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 8 : Working with BODYAdd Text and Blocks in the body, choose appropriate colours tomatch the Website.
  36. 36. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 9 : Starting the FooterThe footer is made using a light Gradient pattern.
  37. 37. NuevoThoughts Technologieswww.NuevoThoughts.comSTEP 10 : Adding Contents to FooterAdd contents to the Footer, like Contact, Links, Copyright Info etc.
  38. 38. NuevoThoughts Technologieswww.NuevoThoughts.comTHE RESULTAfter we are done, we’ll see the output like this.
  39. 39. NuevoThoughts Technologieswww.NuevoThoughts.comBibliography
  40. 40. NuevoThoughts TechnologiesThankswww.NuevoThoughts.comEnough of Spoon-feeding, just go and explore more….Yourself !!