Building a Web front-end development environment

Directory:

Build a Web development environment

1. Auxiliary tool--ps (transduction, repair diagram, measurement)

2. Development, debugging tools--common development tools and debugging tools function introduction and use method

Content:

Cut Chart
Design Draft (. pdf file) ———————————— output (e.g.. png. jpg files)
Material Cut out
Why transduction?
Provide a picture material to the webpage
Html:img
Css:background ". icon{
Background-img:url (.. /images/sprite.png);
background-position:0 0;
}"
Learn about Sprite (Picture Wizard) Recommended reading: "Talk about CSS Sprites (CSS Wizard)" http://www.css88.com/archives/756

Course content: Use the PS tool, use the background map, picture merge scheme, browser compatible

Introduction to Photoshop and basic settings
Version: 03 Adobe photeshop CS
13 Adobe Photoshop CC (CS6 is the final version of the CS series)
CC: official website (purchase or use version): http://www.adobe.com/products/photoshop.html
0-Settings:
1.PS Preference Settings
Edit > Preferences > units with ruler ruler/text: pixels
Panel
2. Open in the Window menu: Tools, Options, information (F8), layers (F7), History >> Save: Windows > Workspaces > New workspace (named)

Transduction Common tools: Move Tool/Rectangle marquee Tool/Magic wand tool/crop + Slice tool/Zoom tool (Ctrl + & _)/Color Picker
Move tool: Select and move Layers
Settings: (option area) Auto Select: Layer
Revocation: Ctrl + Z;  Continuous revocation: ctrl+alt+z; Back to Previous: select History
Rectangular Marquee Tool: Measuring
Magic Wand Tool: Cutout (irregular small icon) >> tolerance/anti-aliasing/continuous
Crop + slice (small triangle) tool: Drag (both are the same set of tools)
Zoom Tool: Ctrl + & _ 100%:ctrl+1 Zoom: Alt + mouse wheel (positive and negative)

3. Auxiliary view
Open on the View menu: Align, ruler ctrl+r, display > Guide CTRL +;(need to check to show extra content)

1-Get information (design draft)
Open Design Draft for information
Size Information >> measurement: width:200px;
Color information >> color: color: #ffcc00;
1.1-measurement (all numbers must be measured)
Working with tools: Rectangular marquee Panel & Information Panel (when measuring, enlarge the canvas as much as possible to reduce the measurement error)

What needs to be measured? All properties that accept numeric values in CSS need to be measured, specifically:
width, height/padding, margin/Border/anchor/text size/row height/background map position
Width;height;padding;margin;border;top,right, font-size;line-height;background-position, etc;
Text size: Individual layers, using the type tool T, to view the options panel; If the text has been merged in the background map, the rectangle box, the height of the text is the size of the font, different fonts have errors
Row height: Individual layer, type tool T, Options Panel-Properties panel, row height is line-height; if merge, Rectangle marquee, enlarge, below the first line below the second row
Measurement-Selection
Rectangle Marquee Tool (default is a new selection, which is the only selection)//Selection: The area selected by the Rectangle Marquee tool, multiple overlays/deletions/intersections can be
Add to selection: Hold down shift; Subtract from selection: Hold down Alt; Cross with selection: Press and hold Shift+alt;
Tips: Large image measurement width >> left and right side of the picture (shift), the width of the small graph from the leftmost to the most left width;

1.2-Take color (all colors are colored)
Use tools: Color Picker & eyedropper tool (zoom in as much as possible)

What do I need to take color? CSS can accept color values of the properties are to take color, specifically:
Border color, background color, text color (border-color, background-color, color)
Text: Individual layers, using the type tool T to get, merged, enlarged, straw pick color, text layer with overlay effect, color picker + eyedropper tool, carefully serrated, choose deep place;
The clever use of color tool: To determine whether the background is solid >> non-stop click to see whether the color value changes
Determines whether the linear gradient >> magic wand tool (in the case of a small tolerance, a color selection, such as a y-axis gradient or an x-axis gradient)

2-transduction
2.1-transduction ago

Which ones need to be cut out? Generally divided into two categories:
Cosmetic (generally used in background properties): Icons, logo/with special effects buttons, text, etc./non-solid color background;
Content (generally used in the IMG tag): Banner, advertising images/articles in the map (if the server data, can not cut graph, only occupy a bit) ... ；

What type of picture are you cutting out?
Content: generally Save as JPG (color is rich, of course, will do some compression, to ensure that the picture is not too large);
Modified: PNG24 (IE6 does not support translucent, need to be compatible with IE6), PNG8, (all support full transparency, but PNG24 support translucent, image quality is higher PNG8 does not support translucency)

2.2-transduction. Hidden Text Only background
Except for special effects, cut into pictures with special effects
If the text is a separate layer, use the Move tool to find the text layer and remove the eyes;
Text and background merge, tile background overlay text: Rectangle marquee tool + Free transform ctrl+t (for background damper)
or Move tool +alt drag (if you move horizontally, hold down shift), drag, release (for background texture, not for stretching)
transduction. Png24
Move tool Select the desired layer (CTRL + multiple) > right-merge Layer (CTRL+E) > Right-click to copy the layer to a new file (target: New, name) or drag directly to an existing file (NEW: CTRL + N)
Single layer, straight to step three
transduction. Png8
With background cut > because PNG8 does not support translucent effects, many small images actually have some translucent pixels on it, so they need to be cut with the background
Merge (visible) layers (shift+ctrl+e or select layers-merge visible layers) > Rectangle marquee Tool Selection > Magic Wand Tool to remove extraneous content (subtract from selection: Hold ALT)
Invisible layers do not merge
Transduction with tiled backgrounds
Use the Rectangle Marquee tool to select an area > Copy and paste into a new file//tile the width of the file (x-axis) or high (Y-axis)

Slicing tools
Suitable for one-size-fits-all action screen
Pull guides > select slicing Tools > Click the slice based on guides button (editable named slices) > Save (choose all slices, unified storage format: File-Save as Web format)

2.3-Save (store required content)
Stand-alone picture, use the drag tool to drag to the new file;
Merged layers, using the Rectangle marquee Tool + Magic wand >> Copy (Ctrl + C), new (CTRL + N), paste (Ctrl + V)/or drag to new file >> Save as Web Format (alt+shift+ctrl+s) (under File menu)
CTRL + N: Set the width is high, the background is generally selected as transparent;

Which format is saved?
A. When the picture is rich and opaque, it is recommended to save it in JPG format and choose the right quality to compress the image.
The higher the quality, the higher the picture quality, the bigger the picture.
Set the principle: the quality does not set to 100 (100 is equivalent to no image compression, the picture will be very large), according to the project needs, generally 60-80 more appropriate
B. If there is no transparency required when the picture is not very colorful, please keep it in PNG8 format
PNG format features: Only 256 colors, the file is relatively small, more suitable for network transmission
Set:ctrl+alt+shift+s>png8> color default 256; Matte: none; diffusion: no dither (upper right corner can store settings, long-term use)
C. Save the PNG24 format when the picture has translucent requirements
Features: The picture is not compressed, so the file is larger, and the translucent effect is supported (save panel with default settings)
D. To maintain the image quality, keep a copy of the PSD source file, modify it on the PSD
BEACUSE:PSD source files can preserve layers for later maintenance, PNG8 will compress the image, if modified on PNG8, it will compress again, resulting in the loss of pixel points;
Each use of the picture, you can keep a copy of the PSD source files, later can be arbitrarily modified on the source file export

2.4-Modification and maintenance
Problem: New feature, add an icon, icon superfluous, to delete, canvas is too large, file blank too much, want to change the position of the icon ...
A. Want to continue to put more pictures? >> Change the canvas size (Image menu-Canvas Size: Modify width height, position selected in upper left corner)
B. Move icon >> If the icon is a standalone layer, drag with the Move tool, or if the icon is a non-independent layer: Select the icon area with the selection tool > Drag the icon with the Move tool
Non-independent layer, select the icon with the selection tool, Ctrl+x cut, Ctrl + V paste, to detach the layer
C. Reduce the canvas to a specified range: Select Selection > Crop (under the Image menu) or use the Crop tool directly
The canvas is generally larger than the image area, maintainability
Note: Modify Png8 picture >> need to change color mode to RGB color (image-mode-rgb color)
Png8 the default picture color mode is index color, the index color changes color, some color information is lost, so when you maintain the PNG8 format picture, you change the color mode to RGB color

3. Picture optimization and merging
3.1-//pictures have been cut to save troops, how to use it in code? >> using the background map
Use the background map code:
<button class= "U-btn" > Point me </button>

. u-btn{
Background:url (images/btn.png) no-repeat 0 0;
}
. u-btn{
Background:url (images/sprite.png) no-repeat 0-50px;
}

3.2-Picture Merge scheme (why do you want puzzles?) ）
What is a sprite puzzle? > A small set of icons in the design into a picture, the use of the introduction of this picture;
Sprite Puzzle Benefits: Reduce network requests, improve page load speed//multiple pictures loading speed is greater than the picture loading speed; browser pair? The request is limited in number, the website opens too slowly, the visitor leaves, does not favor the promotion conversion rate;

3.2.1-size and quality
Balance and trade-offs: In doing picture optimization, it is necessary to balance and choose the size and quality of the picture (inverse, balanced trade-offs)
Compression: Lossless minimage//No noticeable effect on image size, not much compression
& lossy tinypng//an online website
3.2.2-merge (Arrange/classify)
Principle: There must be a gap between pictures (considering the tolerance and maintainability of the image, you need to keep a certain gap in the picture merging)
Picture arrangement: Horizontal & Vertical arrangement
The principle of classification and merger: the merging of pictures belonging to one module, merging the pictures with similar size, merging the pictures with similar colors;

Combined recommendations (two types):
Only the pictures used on this page are merged (no need to load it later); stateful icon merging (with Exchange status: such as pre-click, icon, click after icon, CSS settings only x-axis changes);

Picture compatibility scheme: IE6 does not support Png24 translucent >> two copies: Advanced browser-sprite.png 24;ie6 save a copy of Sprite_ie.png 8 (with background cut)
css3& transduction fillet, shadow, etc. >> advanced browser with CSS3 processing, low-level browser with transduction +haike?? Processing
Or, graceful downgrade, that is, advanced browser with CSS3 processing, normal display, IE6 and other low-level browser does not have this effect

Building a Web front-end development environment