photoshop4webDesignerLYNDACOM

<!--- Photoshop for web designer cs6 ---->
1. Core concept
1.1-- Screen resolution.

1.2-- Work Flow
a. crating mockup or scratch for the Design
	a.1-understand the objective of the design
	a.2-creating basic color combination and get approved
b. Aggregate the Content
	b.1-collecting font, images, swatch
c. SLICE IT UP
	c.1-cropping images and mind set for shapes
	c.2-thinking alignment
	c.3-chopping the whole process
d.Export / organize
	d.1-after collecting all information organize it in a folder
e.CODE
	e.1-convert the design in a functional website
1.3 Creating custom work-space
1.4. Creating new document for your design
	NOTE: you can save your custom layout design using "save preset". once you save the preset than you will able to access
	the preset when creating new document.
1.5.Creating the document for mobile deices
	1.5.1-create some demo size of screen like what window size you worked mostly
	1.5.2-new I-phone size 640X960
	1.5.3-you can also set some preset for the mobile devices screen
	1.5.4-iPad:768X1024,android-480X800
	1.5.5-Email newslatter 600X800

<!-----------------------Lynda.com--------------------------Working with colors------ Chapter 02------------------------->
Adjustment Color setting
আমাদের ডিজাইন বিভিন্ন মনিটর অথবা macbook or notebook এ  বিভিন্ন রকম দেখায়। mac এ ডিজাই একটু বেশি লাইট দেখায় default ভাবে। আর বিভিন্ন মনিটরে বিভিন্ন দেখায় । এইটার সঠিক কোন সমাধান নাই তবে আমরা এইটার জন্য neutral একটা সমাধান করতে পারি
২.১ Go To Edit >> Below Edit panel you will found "Color setting"  >> from first drop-down select Monitor color >> and below the panel unchecked the "Ask me when opening"

2.2 Go to view >> Proof Setup >> Monitor RGB, But If you want to test your design on different devices like mac, or blah blah than go back to view >> proof Setup >> choose your option like Internet Standard RGB or any of theme.

2.3 when you save your document/design make your it will save as web(atl+shift+ctrl) >> make sure your save prompt widow unchecked the option convert to sRGB
2.4. Understanding the colors code -- I have done it before
2.5. using kuler
2.6. creating swath panel: Delete the all swatches from swatches panel >> click the empty   swatches and add the swatches >> from option of the panel >> save swatches exchange
	     Delete swatch panel: Hover the swathes you want to delete and then press alt and click the color want to delete.

2.7. Fill Background color: alt+backspace
     Fill Foreground color: ctrl+backspace
2.8.Change the text colors : pick your colors from swatch panel >> must be select your text layer >> att+backspace

<!----------------------------Lynda.com---------------------Working with layer------ Chapter 03------------------------->
3.1--How to layer works -- I have done before
3.2--Rename and Organized  the layer -- I have done before
3.3--Searching and Filtering the layer and layer colors -- I have done before
3.4--Layer comps(is a collection or group of layer and use in special purpose) ব্যবহার করে আমরা একই লেয়ারের বিভিন্ন কালার দিতে পারে । যা করতে হবে window >> layer comps>> create your layer comps
3.5--Automatic select layer -- I have done before.

<!--------------------Lynda.com-----------------------------Working with shapes------ Chapter 04------------------------->

4.1--Different between pixel shape and vector shape. To create  shape use shape tools (shortcut u).
4.2--Creating vector shapes -- use shape tool in Photoshop
	     There are many free online shapes try to use that
     Lynda.com refers: http://www.premiumpixels.com/
4.3--How to apply stroke in shapes -- I have done before
4.4--Smart Object
     To create smart object >> right click your layer>> select convert to smart object
			     Benefit of smart object >> your layer resolution will not broken >> when click on smart object it will open in a new window >>
     if add some effect or blah blah but it's possible to retrieve smart object.

4.5--Importing images on Photoshop
4.5.1-when you place a image on your Photoshop remember you images should be open as a smart object. Once you open your image as smart object your image quality will not harmed.

4.6--Re-size images on Photoshop
     1.Go to image top of the Photoshop and set your dimension and must use the below option Bicubic automatic or more option.

<!--------------------Lynda.com-----------------------------creating wireframe------ Chapter 05------------------------->
5.1-- Planning of Project
5.1.1-website header width and gutter set guide
5.1.2-website slider width and gutter set guide
5.1.3-website content width and gutter set guide
5.1.4-website promo section or call to action width and gutter   set guide
5.1.5-website footer width and gutter  set guide
5.1.6-Text + colors + images

5.2.1--Creating guide -- I have done before -- but it's so good

5.3--creating responsive grid layout and follow the designer http://www.elliotjaystocks.com/
5.4--Developing a web layout and I developed the layout for bootstrap grid
5.5--Making Pixel perfect alignment

<!--------------------Lynda.com-----------------------------Working with text------ Chapter 06------------------------->
6.1-- point text and paragraph text
6.2--Done before
6.3--
6.3.1-Three types of fonts we have
	      1.Serif Fonts like(Georgia,Platino Linotype,Times New Roman)
      2.Sans-serif Fonts like (Arial, Helvetica,Lucida Grande,Vendana)
	      3.Monospace Fonts like (Courier New,Locida Console)
it's a big problem to select proper font for the web. another things is some times fonts are not available on client's pc.
Helpful resource link :https://typekit.com/ and use google fonts.

6.4--For dummy text >> go to top of the photoshop and hit type >> below type you will find past lorem Ipsum or >> you can use this site :
 http://baconipsum.com/
http://tunaipsum.com/
6.5--Create Character Style>> go to window>> character style
6.6--Create paragraph Style>> go to window>> paragraph style
6.7--little bit 3D text