Photoshop tips and how-tos incl image slicing for Web and using sprites

I had some great how-tos on Photoshop and lost them :-( So here's the rebuild.

Tool Pallet
Slice tool: on pallet is one of 3 of crop, slide and slide select 
Move tool: dashed box in pallet, then draw round the item, then click and hold mouse and drag the item
Line tool: 8th from bottom, used to draw lines


Layers
- you can temporarily turn off every other layer in the Layers palette except for that one layer by holding down your Alt (Win) / Option (Mac) key and clicking on the Layer Visibility icon. To turn all the layers back on again, hold down Alt (Win) / Option (Mac) and click again on the same Layer Visibility icon. More


Slice for web
Useful links on how to here and here

Clear Slices: View -> Clear Slices (when slice tool is selected from pallet)


Pixel Perfect to the PSD
To compare your work to the PSD image do the following
- Open Mac Grab tool (Cmd - Space)
- Choose window button and then click the window to grab
- when it appears in grab tool, copy it (Cmd - C)
- then paste into Photshop page (which has the psd image loaded)
- in layer view, click top drop down and choose Multiply. Now you should see both views
- Use move tool (arrow and plus) to move your pasted image to line up with original (use arrow keys to move last few pixels)
- then measure diffs and fix in your css
- ...and repeat




Sprites
Cutting for sprite
Note: when create new PSD be sure to select transparent and be sure to allow space between images.

Yahoo and AOL analysis
CSS simple sprites css article
Multiple links

Building a Sprite and css manually

  1. Using Slice tool (see top) I sliced the assets in Photoshop and pasted into a new PSD. 
  2. I created new PSD with transparent background and enough space for the images and padding and then some extra space. We can slice the png from the psd to a smaller size at save time.
  3. I used Edit -> Copy to copy across from source to target psd. 
  4. tip: use View -> Clear Slices to clear slices
  5. tip: to select the image sprint in the target psd then click the layer on the right side, then can move with arrow keys
  6. I created next and prev arrows horizontal starting with prev button image on left.
  7. I defined next and prev css classes as follows:
  8. next class with the image url, no repeat and x of -39px, y of 0px. Width and height 36 and 38px
  9. prev class with the image url, no repeat and x of 0px, y of 0px. Width and height 36 and 38px
  10. then apply in the html

Comments

Post a Comment

Popular posts from this blog

My Reading Lists

I had some time over Christmas and decided to organize my reading lists. Interesting how some time away from daily work allows one to raise up your head   Uncle Bob on Principles of OOd See also book: Agile Principles, Patterns, and Practices in C# Available on Safari Books online. Algorithms in a Nutshell Nine   Algorithms   That Changed   the Future Programming Pearls book: http://www.cs.bell-labs.com/cm/cs/pearls/toc.html 97 Things Every Programmer Should Know Seven L a nguages http://pragprog.com/book/btlang/seven-languages-in-seven-weeks Codys book : http://www.domenlightenment.com/ Principles of OO programming: http://www.nczonline.net/blog/2012/12/18/now-available-principles-of-object-oriented-programming-in-javascript-beta/ Object Oriented programming with Stefan Stoy... Chrome V8 : http://code.google.com/p/v8/ https://developers.google.com/v8/ https://developers.google.com/v8/design - read this Mozilla Javascript page ...
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l...
Read more

react-select stacking order bug, z-index, layers and stacking

Image
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select). Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it Variations of this have been reported since 2017. But I tried all the suggestions in the comments and none worked for me. I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint. One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order. Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see h...
Read more