Makeasimplebannerin Pse

441 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
441
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Makeasimplebannerin Pse

  1. 1. Make a simple banner in PSE tutorial on image size, layers, shapes, selection, effects, & type
  2. 2. Mission <ul><li>Make a personal banner for your blog </li></ul><ul><ul><li>https://blog.associatie.kuleuven.be/ </li></ul></ul><ul><li>The K.U.Leuven blog allows you to upload a custom “header image” </li></ul><ul><li>Size: 780 pixels wide, 200 pixels high </li></ul>My Blog!
  3. 3. Make a new image file <ul><li>File > New > Blank </li></ul><ul><li>Unit: pixels </li></ul><ul><li>Size it right: 950 wide, 200 high, </li></ul><ul><li>Resolution: 72 dpi </li></ul><ul><li>Name: banner </li></ul>
  4. 5. Collage: Add a picture <ul><li>Put part of another picture in your image: </li></ul><ul><li>open another picture </li></ul><ul><li>make a selection </li></ul><ul><li>copy that selection </li></ul><ul><li>paste into “banner” </li></ul>
  5. 6. Make a selection
  6. 7. Use the cookie cutter for a shape <ul><li>Cookie cutter tool: </li></ul>
  7. 8. Copy your selection to “banner” <ul><li>Layers Palette: You now have a second layer in “banner” </li></ul><ul><li>Adjust the shape </li></ul>
  8. 9. Add more image <ul><li>we cut and paste another part of the same image </li></ul>
  9. 10. Adjust shape <ul><li>adjust the shape by pulling on the “bounding box”, press “commit” </li></ul>
  10. 11. Reshuffle the layers <ul><li>Grab the top layer and put it in second place </li></ul>
  11. 12. Apply an effect to the 2nd layer
  12. 13. Add type <ul><li>select font, size & style </li></ul><ul><li>Put your cursor in place & type </li></ul>
  13. 14. Save your source document! <ul><li>keep the .psd file for later adjustments </li></ul>
  14. 15. File > Save for Web
  15. 16. Make a transparent gif
  16. 17. Transparent GIF
  17. 18. make a rough first selection lasso tool
  18. 19. Select > Inverse
  19. 20. Edit > Delete
  20. 21. Remove detail using Eraser Tool <ul><li>avoid anti-aliasing! </li></ul>
  21. 22. Save for Web
  22. 23. Optimize images
  23. 24. Improve lighting on a backlit img <ul><li>open backlit.jpg </li></ul><ul><li>make selection of the underlit area </li></ul><ul><li>Enhance > Adjust Lighting </li></ul><ul><li>Add Brightness </li></ul>
  24. 25. Crop image <ul><li>Use the crop tool to draw the rectangle you want to keep </li></ul><ul><li>Press “commit” </li></ul>
  25. 26. Make width 450 px <ul><li>Image > Resize > Image Size </li></ul><ul><li>“ Resample image” </li></ul><ul><li>Resolution: 72 dpi </li></ul><ul><li>Constrain proportions </li></ul><ul><li>Width: 450 pixels </li></ul>
  26. 27. Richer, stronger color <ul><li>Adjust saturation </li></ul><ul><li>Whole picture </li></ul><ul><ul><li>Enhance > Adjust color > Adjust Hue/saturation </li></ul></ul><ul><li>Locally: </li></ul><ul><ul><li>Sponge tool </li></ul></ul><ul><ul><ul><li>mode: saturate </li></ul></ul></ul>
  27. 28. Lighten shadow areas <ul><li>Enhance > Adjust Lighting > Shadows/highlights... </li></ul>

×