Archive for July, 2007

A great tutorial from Graphic Web Design

Slicing Your Images To Create a Website

There are a number of different ways to create websites. Some may choose to hand draw a concept then start coding HTML. Others may want to take a graphical approach to the design and layout. The graphical approach is what I am here to show you.

Being very visual I find it easier to start with an image when designing websites. I will illustrate to you the design process I go through when a new customer hires me. There are a few basic steps to this process. The first is to create an image. Using Photoshop create the image to mimic the general layout you would like for your site. After creating the image you will need to “slice” it up for use in your website template. Next it is time to create an HTML document made up of those slices. This will be the template you will use to create all the pages of your website.

To make it easier to follow along there is a downloadable Photoshop image that is yours to use, alter or demolish as you choose.

CLICK HERE to download the Photoshop Image.   Now let’s get started.

Interface Design

This is the most critical part of the whole design process. The design of your interface is very important for usability. If your visitors cannot find all your content or they are confused they are only one click away from leaving your site.

Planning Ahead

With any new design you must plan ahead. This will enable you to adapt to changes quickly and easily. An example of this is you want to add another section to your website. Does the navigation of your site allow for this, or will it entail a complete redesign. That is wasted time and money. See where you would like to be in the future. Websites are like any other business. You must change with the times.

Layout

We are going to start with an image that is 740×460. In this we need to include the header, navigation and content areas.

Here we have our image that I created in Photoshop (the image on the right). The dark blue bars at the top and the bottom of the page is where our navigation will be. This design is very effective if you have a lot of content and you like fast downloading pages (Our index page for Graphic Web Design is only 16k with all the content and images, so it downloads lightning fast). After you have created your image in Photoshop it is time to slice it up, so we can use it in an HTML document. Let’s slice it up.

 

Slicing Your Image

Although you can use any graphics software to create your image, I recommend using Photoshop because it will make slicing your image much easier. Packaged with Photoshop is ImageReady. This software can be used to save images for the web, to create gif animations and my favorite feature slicing. Now slicing an image means we are going to make smaller individual images out of the larger one you created to place it in an HTML table. You could just have a large image as a page in your website, and make image maps over areas you want to be links. The problem with this is that it will seem like forever before it downloads. As you will see in this example when you slice a large image you can optimize each section individually to make the total file size smaller. Also as in this example some slices are duplicated so you need to only use one of them. This will make the file size even smaller. The example image I created for this is only 26.1k. What this means to you is that this page will only take 9 seconds for a person to download with a slow 28.8 modem speed. Are you starting to see the benefits?

Here we have our image still in Photoshop (refer to top image on the right). By looking at the larger view you can see that there are blue lines placed on the image. These are guidelines you can simply drag out of the ruler area in Photoshop. These guidelines are where we are going to slice the image. It helps to have a working knowledge of HTML. You must know how tables work, so you can slice your image in a way that will work with tables.

After you import your image into ImageReady go to the top of your screen and choose “Slices”. From the drop down menu click “Create Slices from Guides”. Your image should look like this (refer to bottom image on the right).

You should notice that all the slices have been created from the guidelines and are numbered. The numbers are merely the default way that ImageReady names the sliced images. We will change those later.

 

Slicing Your Image Pg. 2

Now that you have created your slices, goto the top of the page and in the “Windows” dialog box choose “Show Slices”. It looks like this.

It is time to combine some of the slices and name them. Choose the “Slice Selection Tool”. The two vertical guidelines split up the header into three images, and we need to combine those slices to make the header one image. Using the Slice Selection Tool and the shift key, first click on Slice 01 in the top left corner, then holding the shift key click on Slices 02 and 03. Next right-click on the center slice and choose “Combine Slices” from the dialog box (Mac users goto the Slices dialog box at the top and choose “Combine Slices” from the dialog box). Your image should look like this (refer to the image on the right).

Notice how it is now one slice and it is highlighted with a yellow border. To name it goto the “Slices Interface” (see image above) in the name field type in “header”. Repeat this process for the footer area and name it “footer”. We still have a few more slices that need to be named. Just under the header on the left side you should see what is now slice 02 (small dark blue square). Because this is the same dimensionally as Slices 04, 08 and 10, we only need to save one of them. Click on Slice 02 with the Slice Selection Tool and name it “blue_square”. Next click on Slice 05 and name it “gray_bar”. If you notice again that it is the same as Slice 07, you only need to save one of them.

Optimizing and Exporting

We are now going to optimize each slice and export them. Use the the “Slice Selection Tool”. to select the gray_bar slice and hold down the shift key and click the blue_square slice. Since these are single color images we are going to optimize both of these at the same time as gifs. Use these settings to optimize the two slices.

Use the the “Slice Selection Tool”. to select the header and then holding the shift key click on the footer too. Since these slices have complex color transitions it is best to save them as jpegs. Uses these settings.

The reason for the small amount of blur is to smooth out some of the pixelation often associated with jpeg images. This is not a common practice when optimizing photographs, because the photo will look out of focus.

To export these images use the “Slice Selection Tool”. to select the header, footer, blue_square and the gray_bar and in the File menu choose “Save Optimized As”. With this you have a few option. You can choose the destination (where the images and code will be saved) then click save or you can choose to save the HTML only and it will create an HTML page that will fit the layout you designed. The third option is what we are going to do. I want to just save the slices that we have selected, so in the “Save as type” dialog box choose “Images Only”. Then below that choose “Selected Slices”. The default in this is that ImageReady will save all the images in an “images” folder. You can click on the “Output Settings” box and in the lower part of this box deselect the “Put images in folder:” check box. I generally create the folder structure of a new website first before slicing the image up. Then click save.

The next step is to create the HTML page we will later use as a template for the rest of the website. If you are wondering why we did not save the center slices, the center large gray box is going to be for your content. The top and bottom blue horizontal bars (that are below and above the header and footer) are going to be where you will put the text links for navigation.

Key Note

I choose to do a design similar to the design used for our Graphic Web Design website to show you how this type of interface works. If you notice how the text seems to be indented in the content area, that is what the gray_bar image is for. You also need to change the background color of those cells to the same color (#CCCCCC) as the gray_bars, so that when the page grows in height it will still look the same. Where the text links are I merely made the background color (#374256) of the cell in the table the same color as the blue_square image. The changing of the colors on the text links is done with CSS (Cascading Styles Sheets). Let’s move on and create the HTML template.

Putting It All Together

It is time to put all the images we just sliced into an HTML document to create the template. However you build your website (either with an HTML editor like Dreamweaver or Adobe’s Golive or you hand code your HTML) you need to create a table that has 5 rows and 3 columns. Be sure to place the center tag before the table and the /center tag after the table to center it on the page. In the top row make the first cell on the left col span 3. This is so you can place the header.jpg image inside. This will also establish the width of the template. In the next row below the header make each cell’s row height 18 pixels to correspond with the blue_square.gif image and make the cells’ width 16 pixels. Do the same for the for the fourth row. Place the blue_square.gif image in the outer cells of the 2nd and 4th row. In the third row first cell (to the left) place the image gray_bar.gif and repeat for the 3rd column. Set both of their background colors to #CCCCCC. For the second column in the 2nd and 4th row set those cells’ background color to #374256. For the center column in the 3rd row (where your content will be) make that cell have a background color of #CCCCCC. In the last or 5th row choose the 1st cell and make it col span 3 to place the footer.jpeg in it. Also specify the row height of the 1st, 2nd, 4th and 5th rows leaving the 3rd row to grow with your content. And that is it. Your page should look like this(refer to the top image on the right).

Since the white background of the page did not work well with the design I created a background image to tile behind the interface. To make simple scanlines create an image in Photoshop that is 1 pixel wide and 2 pixels tall. Next select a square that is 1px by 1px and color it with a color you feel will compliment your design. Then move that selection down and fill that with another color. Save the entire image as a 2 color gif image and name it bg.gif. In the body tag of your new template simply place it in that tag and it will tile across the page. To see the end result click the image on the bottom right.

Click for Larger View

Click to view finished template

Trevor Morris has put together a great set of free scripts for you.

Below you’ll find more than a dozen free scripts for Adobe Photoshop CS and higher. All scripts are very well commented, making them easy to modify and/or learn from. (I’m also available to do custom scripts.)

Array Generator

This script generates a two-dimensional array of cloned objects based on the selected layer or group. The user interface also allows you to specify the number of rows and columns, as well as the horizontal and vertical spacing between objects.

Black & White Variations

This script converts and saves an image to black-and-white using 20 different methods (although more methods can be added).

Center Layer

As the name implies, this script simply centers the active layer within the document, both vertically and horizontally.

Close Without Saving

A series of scripts for closing all documents, only the current document, or all documents except the current one, without saving changes.

Contract Canvas Selection

This script contracts a selection that touches the document boundaries on one or more sides — something that Adobe Photoshop CS2 and earlier isn’t capable of doing.

Hide All Layers

A simple script that sets the visibility of all layers to off (invisible).

Show All Layers

A simple script that sets the visibility of all layers to on (visible).

Import Folder As Layers

This script combines a series of images from the selected folder into a new document, and then names each layer according to the original file.

Layers to Comps

This script simply creates a layer comp for each layer in the active document.

Rename Layers

This script renames all layers in the active document, including those within groups. The script prompts for a layer name pattern, and then renames and numbers the layers from bottom to top.

Search For Layers

This script searches for layers, by name, and selects the first match.

Sort Layers

This script sorts all layers in the active document alpha-numerically (from top to bottom).

Toggle Layer Visibility

This script toggles the visibility of the current layer (on or off).

View Actual Pixels

This event-based script displays the current document at 100% zoom (actual pixels).

Here is a comprhensive list of other resources.

Photoshop Blog – Photoshop News & Photoshop Tips | PhotoshopSupport.com

The Photoshop Blog offers the latest Photoshop news and software updates, as well as Photoshop tips and tutorials.

Blog Tutorial – Blog Templates | PhotoshopSupport.com

Blog tutorial that shows how to work with blog templates and add your
own design elements. Includes links to blog resource sites.

Lunacore Photoshop Blog

Lunacore offers detailed Photoshop tutorials, tips, blog, FAQ, articles, news, training, advice and forums.

Flash Menu, Flash News Scroller

Flash menus, news scroller, text scroller, and slideshow scripts.

Find That Exact Photoshop Tutorial, Photoshop Tips, Tools, Plug-ins and Blog, Adobe Photoshop

We
are your Premier Photoshop Tutorial Search Engine. Find that Exact
Photoshop effect, tool or technique you’re looking for! Simple, easy
and free to add a Tutorial. Create that perfect logo! and also check
out our Photoshop Blog and Reviews

PS Workshop Blog

Your
premier Photoshop Tutorial search engine. We’re still the easiest way
to find that exact Photoshop effect or Tutorial you’re looking for! We
have a great selections of Photo shop tutorials. Most tutorials are
complete with step by step instructions that gives you the knowledge to
create some great images for logo or website desgin.

Dear Debbie. . .

Adobe
Photoshop help, tips, rumors, commentary, and tutorials from Popular
Photography’s imaging guru. (Romantic advice also given upon request.)
<br>
<i>Send your queries to <a href=”mailto:deardebbie@popphoto.com”>deardebbie@popphoto.com</a>.
</i>

jerm’s art and design blog

jerm’s digital art playground where he experiments with web design and shares fragments of his mind

Sigsource :: PhotoShop Tutorial :: Design A Modern Blog Layout

Sigsource
is a free sig request site, graphic design and web design community
providing free Photoshop tutorials, free Photoshop resources and web
site design articles to the art community.

Webdesign mockup using Photoshop | The undersigned

The
undersigned – freelance graphic designer and web designer. Portfolio
and personal blog where he writes some guides about general web
designing and WordPress theming.

A guy, a Blog, and a Photoshop Blog – Information, Comments, Reviews // BlogCatalog

Blog Catalog is the premiere social blog directory on the internet. Search, Browse, Rate and Review thousands of blog sites.

Photoshop Blog Entries // Blog Post Tag Search // BlogCatalog

Blog Catalog is the premiere social blog directory on the internet. Search, Browse, Rate and Review thousands of blog sites.

The Flash Blog » Photoshop CS3 Export to Zoomify!

theFlashBlog.com is a resource created by Lee Brimelow that includes tutorials, Actionscript and news related to Adobe Flash.

Bitácora de Photoshop – Comments, Rating, Related Blogs, Information – Blog Flux Blog Directory

Information page on Bitácora de Photoshop with discription, RSS feeds, email subscription, and more.

All posts by The Photoshop Blog

All posts by The Photoshop Blog

Quasimondo – Mario Klingemann’s Flash Blog: Photoshop EPS Parser

Mario
Klingemann’s observations, occupations, visualisations and vibrations
around the world of Macromedia Flash, art, mathematics and all the
rest.

Photoshop.artbosco.com: photoshop blog

Adobe
photoshop: tutorials, graphics, effects, brushes, filters, font, text,
textures, psd, background, cs, shapes, ps, border, plugin, fonts,
texture, shape, actions, psd, cs, shape, texture, creating, vector,
brush, gradient, tutorial, background, tool, layers, tutorials,
buttons, ps, mask, buttons, fonts, filter, tips, color, plugins, tool,
filter, font, graphics, mask, gradient, make, shapes, button, pattern,
image, textures, button, transparent, border, text, layers, layer,
vector, plugins, tutorials, drawing, drawing, transparent, make, tips,
brushes, image, create, tricks, plugin, action, color, create,
tutorials, brush, styles, techniques, tricks, selection, effect,
styles, tutorial, effects, action, effect, creating, techniques,
actions, pattern, filters, layer, selection

Photoshop Blog and Tutorials on Addicted to Design (A2D)

photoshop
blog, blog, photoshop tutorials, hdr tutorial, image resize action,
toning, split-toning, infrared, resize image, photoshop resize action,
how to install actions in photoshop, photoshop plugins, hdr, batch
resize, how to install an action?, adobe photoshop, cs2, cs3, photoshop
effects, photoshop filters, weblog

SoulCast – Photoshop Blog posts. 10 tags on Photoshop Blogs

10
photoshop Blogs about Adobe applications, layer palettes, professional
designers and graphics, professional image-editing standard. There’s
always that silver lining – sometimes you just have to search a little
more to find it.

Blog for Free Training on Photoshop, Flash, Dreamweaver, FrontPage, Adobe – Macromedia Apps

Blog for Free Training on Photoshop, Flash, Dreamweaver, FrontPage, Adobe – Macromedia Apps

HOW TO: Make a Blog Header Graphic – PaulStamatiou.com

This
one’s a quick & dirty guide for the people that asked me how I
created my header graphics. Header graphics mark a blog as unique and
can lure a reader in from the get-go. Create several of them, make them
rotate and your blog will give off a dynamic appearance.

Rick Brewster’s blog : Problems installing Adobe Photoshop CS3 on Vista x64?

So
I went to install Photoshop CS3 on my Vista x64 box at home, and got
this nice error: Internal Error 2739 Gee, thanks for the info. Anyway I
searched online for ways to fix this, and they involved running
regsvr32.exe on jscript.dll and vbscript.dll.

Commercial Photoshop Retouching: In the Studio | Photoshop Blog | PhotoshopSupport.com

Photoshop Support offers links to the best free Adobe photoshop tutorials and resources.

Photoshop tutorial blog

video
tutorials – We provide comprehensive introduction to Photoshop 7 and
Photoshop CS – geared for beginner to intermediate users. The classes
contain high quality video recording and will take several weeks to
master. The classes are taught by using a hands on, step by step,
follow along with the instructor method. Equivalent content and style
of a three day class.

StumbleUpon » A Complete Guide to Digital Makeover i…

Website
review of A Complete Guide to Digital Makeover i…. Discovered in
Desktop Publishing. Related to desktop-publishing, photoshop,
graphic-design. StumbleUpon is the best way to discover great websites,
videos, photos, blogs and more. Channel surf the internet and get
personalized recommendations according to your interests. Keep an
online history of your Stumbles, and rate, review and share all the
cool things you find.

Photoshop Tutorial

Tech, Web Tips Tricks Hacks, Reviews, Make Money Online, Design, HTML/CSS, Photoshop Tutorials

Tutorial: Pop Art Photoshop » Vestal Design Blog

A
design blog with a particular emphasis on green design, design for
society, and environmental technologies, Vestal Design Blog also
discusses web design, product design, graphic design, and architecture.

Have fun

The staff at NSI Photoshop
http://www.msiphotoshop.com

———————————————

MSI Web Video is software product that interfaces between your video and website. It isnot a compiler of videos however we provide all the tutorials and continually update these with new software and information to help you. Video is not as easy as audio however it is being widley used now that broadband is becomming more widely accepted. Use it for business or fun and the skills you will gain far outway the cost of the product.More Information

 

Submited: by Nicholas Hall

---

Photoshop – 101 Hidden Tips & Secrets Hope it
helps some of you out, as it did for me!

---

Hope it helps some of you out, as it did for me! Print thse out and leave them beside your computer.

1. Press Tab will hide
tool bar and palette, Shift+Tab will hide only palette.

2. Hold Shift +
click the top blue bar for toolbar and palette will move them to the nearest
edge.

3. Double click the top blue bar, on any palette window, to
minimize it.

4. Double click the gray background will bring up open file
option, Hold Shift+double click will open up the browser.

5. Sick of the
default gray background around your image? Select paint bucket, hold shift and
click on the gray background, it will change to whatever color you have in your
foreground color box.

6. In Photoshop, all “Cancel” buttons in a window
can be changed to a “Reset” button by holding Alt.

7. Caps lock will
switch your cursor for accuracy.

8. Press F button, it will switch
between 3 different screen modes and give you more working area.

9. To
draw a straight line, click then move to the end point and hold shift +
click.

10. Hold Ctrl will temporary make any tool into move tool until
you release Ctrl.

11. Ctrl + Alt and click drag the image, it will make a
duplication of the current image over lay on top.

12. Hold Space bar, it
will make any tool into “Hand Tool” until you release Space bar.

13.
While in Zoom Tool, Ctrl+space = zoom in, alt+space = zoom out.

14. Hold
Ctrl and press “+” or “-” it will change the % for image in navigator
window.

15. When Using eyedropper tool to capture foreground color, hold
Alt and click, it will instantly capture the color for background.

16.
With Measure Tool, draw a line then hold Alt and draw another line from the end
of the first line, it will measure the angle.

17. Ctrl+Alt+Z and
Ctrl+Shift+Z will go back and forth in the history.

18. Alt+Backspace and
Ctrl+Backspace will fill in the whole screen with foreground color or background
color, Shift+backspace will bring up option window, Alt+Shift+Backspace and
Ctrl+Shift+Backspace, will fill the image with foreground or background color
but will leave the alpha transparent area alone.

19. When free
transforming with Ctrl+T, hold Alt to keep the original image and then to
transform a duplicated layer of it. Ctrl+Shift+T to repeat whatever you did in
the last transform.

20. To make sure your Crop is on the edge of the
image, hold Ctrl while cropping.

21. Ctrl+J will duplicate the current
layer.

22. Ctrl+Shift+E will merge all visible layers to one layer,
Ctrl+Shift+Alt+E will make a copy of the original and merge all visible
layers.

23. While using Marquee Tools, hold Alt it will make the starting
point as a center of the selection.

24. Ctrl + D to deselect,
Ctrl+Shift+D to reselect what you deselected.

25. While selecting with
Marquee tool, pressing the space bar can allow you to move the
selection.

26. Hold Shift and press “+” or “-” it will switch between the
layer mode:

N = Normal
I = Dissolve
M = Multiply
S = Screen
O
= Overlay
F = Soft Light
H = Hard Light
D = Color Dodge
B = Color
Burn
K = Darken
G = Lighten
E = Difference
X = Exclusion
U =
Hue
T = Saturation
C = Color
Y = Luminosity
Q = Behind 1
L =
Threshold 2
R = Clear 3
W = Shadow 4
V = Midtones 4
Z = Highlights
4

***The shortcut works even for following situation:

***Alpha
turned off, Indexed Mode, Line tool, Bucket Tools, Dodge and Burn
Tools

27. While using Brush or any other tools, change the opacity by
typing the number.

*** type one number for % of it’s ten times
[4=40%]

***type two number for exact % [press 7 then 2 will get
72%]

28. Hold Alt while clicking on the eye icon beside the layer, it
will hide all other layers.

29. Hold Alt while clicking the pen icon
beside the layer, it will unchain this layer from all layers.

30. Select
a layer, hold Alt and click the top edge of another layer, it will group
them.

31. Hold Alt and click the button “Create a new layer”, it will
create a new adjustment layer.

32. Select a layer and hold Alt, then
click on the garbage can button. It will instantly delete the layer, marquee
where you want alpha and Ctrl+click the “Create new channel” button, it will
create an alpha only on the area you marquee.

33. File> Automate >
Contact Sheet: this can create a small thumbnail for every file, this can save
you some time from searching.

34. When Move Tool is selected, toolbox on
top can be useful from time to time, these are “Auto select layer” and “Show
bounding box”.

35. While Move Tool is selected, hold Shift
(Alt+Shift+Right click) and allow whether or not to make a current layer chain
with your upper layer.

36. With grid on, click the top left corner of the
grid and drag to anywhere on the image to set the pivot, double clicking on the
icon again reset the pivot.

37. After, draw a path on the image with pen
tool, Ctrl+shift+H can hide/show it.

38. Control Navigator with keyboard
sometimes can be more time efficient than mouse.

***

Home = move
to top left corner
End = move to right bottom corner
PageUp = move up one
page
PageDown = move down one page
Ctrl+PageUp = move left one
page
Ctrl+PageDown = move right one page
Shift+PageUp = move up 10
pixel
Shift+PageDown = move down 10 pixel
Ctrl+Shift+PageUp = move left 10
pixel
Ctrl+Shift+PageDown = move right 10 pixel

39. Ctrl+Tab
allows you to switch between different image files you are working
on.

40. F12 = Revert to how the file was the last time you saved
it.

41. Shortcuts for Channel: RGB, CMYK, indexed
color…

***

Ctrl+”~” = RGB
Ctrl+1 = red
Ctrl+2 =
green
Ctrl+3 = blue
Ctrl+4 = other path
Ctrl+9 = other path
Ctrl+”~”
= CMYK
Ctrl+1 = light green
Ctrl+2 = pink red
Ctrl+3 = yellow
Ctrl+4
= black
Ctrl+5 = other path
Ctrl+9 = other path
Ctrl+1 =
Indexed
Ctrl+2 = other path
Ctrl+9 = other path

42. Hold Ctrl then
you can draw a red box in the Navigator thumbnail for viewing.

43. Hold
Alt and click on any of the history steps, that step will be copied and become
the most recent one.

44. Alt drag a step from a serial action can copy it
to another action.

45. Alt-click the flare preview thumb, and you can
fill in numerical co-ordinates for lens flare.

46. Holding Shift + Alt
while transforming an object will do it proportionally, from the
center.

47. If you have the move tool selected and you want something
duplicated just hold the alt key and move the image, holding the Shift + Alt
while doing this, it will move it along one axis.

48. If you want to
straighten an image that is crooked (maybe from scanning), click on the
eyedropper tool or hit the I key 3 times to get the ruler. Click on the left
side of the straight edge, then the right side of the straight (but crooked)
edge. The choose Image> Rotate Canvas> Arbitrary, Photoshop will give you
the degrees of rotation you just click ok.

49. If you create something in
Illustrator, copy and paste it in Photoshop, it will ask you if you want this to
be a pixel, path, or shape layer.

50. If you have a mask on a layer and
you want to place a image in there and keep the mask. Simply open the image, say
copy, and then Ctrl click on the layer to select the mask and use Shift + Ctrl +
V to paste it into the mask which will also put it on a new layer as
well.

51. To center an image, Ctrl + A , Ctrl + X, Ctrl + V, I think it
also puts that image on a new layer.

52. Ctrl+E will merge the
highlighted layer down to the next

53. When you have a brush selected,
using [ or ] will scroll up or down that brush list.

54. Double clicking
the zoom tool will make the image 100%, double clicking the hand tool will fit
the image to your screen resolution.
55. Typing Content:

Ctrl + H will
hide the highlight on your selected type.

If you click once while your
type is selected on the font list, you can use your arrows to scroll up and down
and see the fonts change on the fly!

Alt + Left or Right arrows will
change your tracking in increments of 10
Ctrl + Alt + Left or Right arrows
will change your tracking in increments of 100
Ctrl + Alt + Up or Down arrows
will change your leading in increments of 10 pts
Shift + Ctrl with < or
> will change your font size in increments of 2 pts

56. Ctrl + Alt + T
to make a copy of the layer in which you want to transform.

57. Ctrl +
Alt + Right arrow. duplicates the layer you are on.

58. Change the active
layer : Alt + [ or ].

59. Move the active layer up and down : Ctrl + [ or
].

60. Link 2 layers: with move tool click in the first layer hold Shift
and click in the second one.

61. Ctrl+[plus key] will let you zoom in on
an image anytime while Ctrl+[minus key] zooms out. Ctrl+Alt+[plus key] will zoom
in AND RESIZE the window to fit the image size… same for Ctrl+Alt+[minus key]
as well.

62. When using the Polygonal Lasso Tool, click backspace to undo
a lasso step.

63. Pressing X will switch the selected foreground and
background colors.

64. Pressing D will reset the foreground and
backgrounds colors to black and white.

65. If your image has multiple
layers, create a Marquee selection and press Ctrl+Shift+Cit won’t work if you
selected a hidden layer) will copy the image into memory as if they were
flattened! Paste it on a new document to see the result.

66. Ctrl+Alt+Z
will do multiple undo, versus just one.

67. Ctrl+click a layer thumbnail
to select the layer transparency

68. To see what your layer mask looks
like (and edit it), Alt+click its thumbnail in the layers palette

69.
Press and hold Ctrl+Alt and click the Help bar with your mouse, drag it down and
highlight “About Photoshop” and let go of the left mouse button for a different
About Photoshop splash/screen.

70. When using Polygon lasso tool hold
Shift to make a perfect line, it goes every 30 degrees

71.Photoshop CS2:
Group many layers by clicking the layers you want to group by clicking it while
holding the Shift key down, and then press Ctrl+G to group them into a folder
for means of better organization.

72. Ctrl+Shift+N creates a new layer
with a dialog box; Ctrl+Shift+Alt+N gets you a new layer without the
hassle.

73. Back to brush, [ and ] will increase/decrease your brush
size, Shift + [ or ] will soften or harden your brush edge.

74. Still in
[ and ], Ctrl + [ or ] will move your currently selected layer up and down the
hierarchy and Shift + [ or ] will select upper layer or lower layer.

75.
Stamp Tool (s) is used to copy an area of image (defined by alt+clicking and
area) and paint it somewhere else (cloning). It also works when you have
multiple images open at the same time. Alt click an area of any opened file
image and paint it anywhere else.

76. After you created a text you can
click on font type tab and tap “down” key over and over to scroll through the
font list and see the changes in (relatively) real time. A feature that I am
tired of waiting to happen in illustrator.

77. Still in text mode, a
trick from Microsoft word to apply hi-light to your text hit Ctrl+Shift+ < or
> to resize your text, to your preferred font size. Pressing Ctrl key while
you are typing also gives you a free transform box temporarily and will go if
you release it. Resizing text also works by pressing Ctrl+T (on selected layer,
not when you are typing). It still retains as an editable text layer
after.

78. And remember, pressing enter when you type will take you to a
new line just like typing a letter but pressing Ctrl+Enter or Enter on numeric
key will finish what you type.

79. You can drag a layer on to any other
opened images in Photoshop and it will copy it as a layer (better than copy and
paste image). Holding down Shift while moving it will snap the image right on
the center of the other opened image

80. If you are working with
sets….

Click on the set, in the blending mode it shows pass through by
default… if you have an adjustment layer within a set and you want that
adjustment layer to effect those layers underneath it within the set only, set
the blending mode of the set to “normal”
instead.

CODE

Mentioned before with more explanation:

-
Pressed F to switch to 3 different viewing mode… when I first try it I said
“wtf? what it’s for?” Well, if you are sick of painting your image on the
corners just to find yourself resizing your current image window, with F you can
pan way outside your image. Happy corner painting!!

- Create a new
file, 500×500 px, create a new layer, get a standard brush and paint a dot on
the top center of your image (like the number 12 position on a clock). Press
Ctrl+Alt+T, it will duplicate your original layer and free transform the new
one. Move the pivot point (the circle with little dot in it found when you are
free transforming something) to the center of your image, rotate your image 30
degrees to the right and hit OK to confirm the
transform

now………

Be excited……….

Hit
Ctrl+Shift+Alt+T 10 times and see what happens!

81. When using the “move
tool” you can select any layer by holding down the CTL key(CMD on a Mac) and
clicking on the part of the layer on the canvas with your mouse. This way you
won’t have to go to the Layers palette every time and you don’t have to keep
checking on or off the auto select options for the move tool.

82. You can
link up layers without going into the layers palette, by selecting the layer
(how I just mentioned above) and holding down CTL + Shift(CMD + SHIT on a Mac)
for each additional layer you want to link up. You can unlink them by clicking
on the layer again.

83. You can delete more than one layer at a
time…….by linking up all the layer you want to delete, and holding down
CTL(CMD on a Mac) while you click on the garbage icon to delete the
layer.

84. When using the type tool you can ok it by pressing CTL +
Enter(CMD + Enter on a Mac) instead of clicking on the check mark on the
options.

85. If you have more than one type layer, and want to make any
of the following changes color/font/size/alignment/initializing to all of the
type layers at the same time…..All you have to do is link up the type layer,
hold down the Shift key and in the options for the type tool make your change
i.e. color, size, etc.

86. You can use your number pad to change opacity
for a layer.… I.e. type 5 and the opacity will be 50; type 55 and the opacity
will be 55. You can use the number pad for any tool that uses opacity…like the
airbrush tool, stamp tool, brush, gradient, etc.

87. Pressing Tab key
will hide the Tools palette and any other palette that you have on the stage.
Pressing “F” will change between Full Screen modes. Using these two tips you can
view your work Full Screen without any palettes.(You can press CTL+Alt+0 to fit
your work to the screen, or you can press CTL+0 to zoom to 100%)

88.
Pressing the “+” and “-” keys while holding down CTL+Alt will resize the whole
document window, not just the work area.

89. You can delete a layer by
holding down the “Alt” key and pressing “L” twice……actually now with
Photoshop 7 you got to press “L” three times. It’s not actually a keyboard
shortcut, but it’s a quick way to do it….don’t know if it works on a
MAC.

90. Pan documents with the space bar.

91. Ctrl+click a layer
(in layers palette) to select it’s transparency.

92. Ctrl+Alt+click
between 2 layers in the palette to group them.

93. Alt + click in “add
layer mask” button to add a black layer mask (instead of a white
one).

94. When you select something, pressing Ctrl+J will copy the
selected area and add another layer with the copied area – opposing copying the
layer, making a new layer, and pasting it.

95. To glue the palettes
together (all palettes combined into one strip), you just drag & drop a
palette onto the end of another palette (watch the rectangle that indicates
where the palette will get attached to).

96. Hold down Alt while Burning
to Dodge instead, and vice versa.

97. Ctrl-click a layer to select an
objects; alternatively, you may select more than one object/s in more than 1
layer by holding Shift while using the method just mentioned (Ctrl-click). To
deselect, just press Ctrl+D.

98. If you have a mini scroll on your mouse,
you may use that to zoom in (scroll up) or zoom out (scroll down).

99.
Need to locate a layer quick? Use the Move Tool (V) and right click on the area
the object lays. There should now be a “cursor-menu” with all the layers that is
in that particular area. Now take a good guess and see which one of them fits
the shoe; select a layer and Ctrl-Click the layer in the Layer Palette – see if
the selection traces the object you desired to edit/find. Useful for those messy
people (i.e. me!).

100. Need to get rid of a background quick? Assuming
you at least know how to crop around an object, do so. Now press Ctrl+I or
Shift+Ctrl+I for Inverse Selection. Press Ctrl+X to %@#!* that part out, and you
should be left with the object!

101. Want to save the time from
loading All your Photoshop brushes, when your Photoshop accidentally forgets to
load them up (happens to me sometimes)? Select the brush tool, and click the
little arrow pointing right (located at the top toolbar), next to the Master
Diameter tick. Go down to Preset Manager and now there should be a menu of all
the brushes currently loaded. Click on the first brush (top left) and scroll
down to the bottom. Now hold Shift and click the last brush (bottom right). This
should highlight all the brushes. See the “Save Set” to the right in the menu?
Click that and name your brush set whatever you want, for this matter I just
name it All (so I remember that this brush set contains all the brushes I
currently have loaded, and is located near the top when loading the brushes up).

And my all time favorite is use the magnetic lassoo for extracting pictures.

Enjoy

The staff at MSI Photoshop
http://www.msiphotoshop.com

—————————————–

 

HI FI Audio Stream
is built on the same foundation as MP3 Sound Stream however it has theautomation removed for those who want more control over the compression of their files like muscians and professional audio compilers. HI FI Audio stream is mainly for those wanting high quality stereo streaming and are delivering mainly to a broadband audience however it will also
compresss very tightly. It uses your original mp3 or wav file so anunderstanding of mp3 production and compression is helpful though not necessary.

Designing graphics has never been easier.
Here are some free company logo psd files you can download. Just open them in
Photoshop and delete the Freepsd watermark. You will find a heap more free psd
files ready to add your creative talents to at http://www.freepsd.com/

---

Business logo #91

Business logo #89

Business logo #76

Business logo #71

Business logo #70

 

Have fun with these

 

The staff at MSI Photoshop.com

http://www.msiphotoshop.com

 

————————————–

MP3 Sound Stream provides a simple CLICK AND GO system to allow anyone to add streaming audio to a web site….. for just cents in the dollar. MP3 Sound Stream’s semiautomatic interface means you do not need to know anything about compression or streaming protocols. If you can copy and paste then you have most of the skills needed for to be able to add streaming audio toyour website today. Compiles from MP3 or Wav files. More Informatio

This tutorial will make you a graphic Designer in no time.Download the free PSD Banners. These come complete with the psd files so you can break them uo and easily add your own info and text.

 

Banner Template – FB063

Sources available: PSD (Photoshop), Fonts

 

Banner Template – FB062

Sources available: PSD (Photoshop), Fonts

 

Banner Template – FB061

Sources available: PSD (Photoshop), Fonts

 

Banner Template – FB060

Sources available: PSD (Photoshop), Fonts

 

Banner Template – FB059

Sources available: PSD (Photoshop), Fonts

 

Banner Template – FB058

Sources available: PSD (Photoshop), Fonts

 

Banner Template – FB057

Sources available: PSD (Photoshop), Fonts

You can find more at I will give you the link for more tomotrrow.

Tomorrow we will give you more with Logo templates and full PSD files.

From the team at MSI Photoshop

http://www.msiphotoshop.com

2 New Video Tutorials

Two
new free Video Photoshop Tutorials are available from
WatchandLearnPhotoshop. The first one explains how you can use
Photoshop’s batch processing features, in other words how to create and
use actions for batch processing, one of the most time savings features
of Photoshop. The tutorial shows an example of how you can apply a
watermark on several pictures at once.

Description:

Ever wanted to resize a group of images or add a
watermark to a group of images, but you just didn’t have the time to do
it? Well, with Photoshop’s Batch processing capabilities, you can make
changes to multiple images all at once. In this video, you’ll learn how
to add a watermark to a collection of images all at once.

And the link to the tutorial

The second tutorial is about clipping masks. It explains how you can
add an image inside text with Photoshop using clipping masks.
Description:

You’ve all seen postcards or advertisements with a
picture of something inside a block of bold text. In this tutorial,
you’ll learn just how easy it can be to achieve this effect.

And of course the link to the tutorial, watch it here

Enjoy

The staff at MSI Photoshop Tutorials
http://www.msiphotoshop.com

———————————-

Layers are a powerful feature of Photoshop that allow you to work on one part of an image without disturbing the rest of it. While the concept of layers may seem intimidating at first, once you get the hang of using layers you’ll wonder how you ever survived without them!