By popular request, the top 10 Adobe Creative Suite Keyboard (and other) shortcuts allowing you to boost your productivity and impress your friends.
Note: these shortcuts are guaranteed to work with Photoshop, Illustrator and InDesign 24/7, 365 days a year, Christmas and holidays included, unless otherwise noted.
10: Copying a graphic or object: select the graphic/object, hold down the alt key (option key on a Mac) and drag;
9: Zooming Out with the Zoom Tool (Magnifiying Glass Tool): hold down the alt key (option key on Mac) and click with the Zoom Tool selected.
8: Displaying a page or document at 100%: A: Hold down the Control Key and the "1" key; or, my favorite, double click on the Zoom Tool (Magnifiying Glass) in the Tool box.
7: Displaying a document within the existing monitor screen (Fit in Window): Hold down the Control Key and the "0" (zero) key on the keyboard or double click on the Hand Tool in the Tool box.
6. Temporarily displaying the hand tool to scroll around the page: hold down the spacebar and click and drag the mouse; let go of the spacebar to return to the previous tool you were using.
5. Hide all panels and toolbars: hold down the Tab key.
4: Hide only the panels on the right hand side of the screen: hold down the Tab and Shift keys.
3: Cycle through the screen modes (Photoshop and Illustrator only) : hold down the F key on the keyboard. (Note: this single-key keyboard short cut is also a "gotcha" one that you can very easily accidentally implement in the normal course of working in Photoshop and Illustrator.) The various screen modes in Photoshop and Illustrator are also accessible by clicking and holding down the mouse on the icon at the bottom of Tool Box. (Gotcha Alert: all the tools in the Tool Box in both Photoshop and Illustrator have single-letter keyboard shortcuts, so if you're not careful you can easily and accidentally trigger one of these shortcuts.)
2: Draw a perfect circle or square (depending on what tool you use) hold down the Shift key and keep it held down while drawing.
And the number one Creative Suite Keyboard Shortcut:
1: To draw a shape or selection from the center out (instead of the default upper left corner): select the desired drawing tool (rectangle, ellipse, etc, or rectangular or elliptical selection tools) hold down the alt key and click and drag the mouse.
Bonus Keyboard Shortcut: Control - Z (Windows; Command -Z on the Macintosh) is Un-Do.
Photoshop has only one level of Un-Do, that is you hit Control Z you go back on step. Illustrator has multiple levels of Un-Do, every time you hit Control Z you go back another step, same with InDesign. However Photoshop has another feature: Step Backward, keyboard shortcut is Alt-Control-Z. Every time you use it you go back another step. This feature ties in with the History Panel in Photoshop (which is sort of a super Un-Do). More on the History Panel in Photoshop later.
Next month: silly (but interesting) Photoshop tricks.
Saturday, August 30, 2008
Thursday, July 17, 2008
Dreamweaver Training Tips
Below we've listed some of the basic considerations you should be aware of when creating or managing a web site. Keep in mind that it's not absolutely necessary to use Dreamwever but the alternative is essentially hand coding...that is knowing all the technologies involved so well you can write the code yourself.
Static or Dynamic?
Web sites come in two basic "flavors": static or dynamic.
A static web site is one where the content you put on the pages: text, graphics, etc., doesn't change until you change it and update the web site.
A dynamic web site is one where the content changes "dynamically" typically based on user input. Think of Amazon.com, say you're interested in a book but you forgot the title but remember the author's name. You go to Amazon and you type in the author's name and hit "enter". After a second or two a list of all the books by that author appears on the page. That information is typically being pulled onto the page from a database or some other external data file, such as an XML file. (An upcoming post will have more information about how XML files may be used in web sites.)
Dynamic web sites are cool but the techniques and technologies used in them represent a leap above the technologies used in static web sites. If you're interested in dynamic websites you still need to master the techniques and technologies needed to create static web sites. (We hope to post an article soon here on dynamic web site technologies.)
When creating a Dynamic Website typically you also need to pick an application server and scripting language. The reason for this is that pages in dynamic web sites typically have code in it that executes on the server, unlike html pages on static websites. Because the pages are doing more on a dynamic website, you need an application server that knows how to interpret the code that's on the page.
Below a quick reference to other techniques and technologies you will use in creating any web site, whether static or dynamic but don't be intimidated by that, in almost every case Dreamweaver will create the code you need for you and please note that all of them (except creating graphics, which is a separate class) are covered in our Dreamweaver Web Design class: http://www.multigroup.com
Graphics
Dreamweaver (or any other product that allows you to create or manage web sites) does not create graphics. You'll need some other application to create graphics for the web. Again, we're some what biased but Adobe does produce the industry-leading products in this regard, too.
Photoshop, Illustrator and Fireworks can all be used to create graphics for the web. (See our post on Fireworks but keep in mind Photoshop and Illustrator are also great products for creating graphics for the web though if I had to pick one product it would be Fireworks, then Illustrator and then Photoshop.. in my opinion and given my proclivities. (We hope to devout an upcoming post on the differences between Photoshop and Illustrator.)
Both Photoshop and Illustrator have their strengths and weaknesses and in the best of all possible worlds if you're serious about designing for the web and print you would use both.
Graphics formats that are supported on the web are: gif files, jpeg files and png files.
All of the above listed products can output these files.
HTML and XHTML
Web pages are basically html files, each html file is another page. Dreamweaver writes the html for you, strictly speaking no knowledge of html requited but in practice a little knowledge of html helps. (We provide html basics in our Dreamweaver class.)
Keep in mind that html is not a programming language, it's a mark up language and relatively simple to understand and use. Years ago I worked in a publishing company and I would watch the typesetters sitting in front of dedicated computers used only to set type for a magazine.
If they wanted to indicate to the computer that a word should be bold they would put the word inside of a bold tag. When printed by the computer those words would appear bold. Well that's exactly how html works, except it's the browser that makes the words bold when it sees the appropriate html tags around the word.
Note that html was not what was used way back when I worked for the publishing company with the dedicated typesetting machine. However that language was one of the sister languages to html created from SGML (Standard Generalized Markup Language).
For More information SGML and how it relates to HTML see the Wikipedia article:
http://en.wikipedia.org/wiki/SGML#Original_uses
XHTML is html's younger brother. For all intents and purposes you can simply think of it as the latest version of html and it is recommended that you use it. (The latest version of Dreamweaver will write xhtml for you by default and there is no practical reason that I can think of why you shouldn't.
For more informaton on XHTML see the Wikipedia article:
http://en.wikipedia.org/wiki/XHTML
Cascading Style Sheets
Cascading Style Sheets (CSS) are a required supplemental technology in creating and maintaining web sites these days. (See our blog entry on using CSS to format text.)
We provide substantial information about using CSS both to format web pages and to create layouts with div tags, and you're in luck again because Dreamweaver will write the CSS code for you too, and CSS while not exactly a mark up language is also fairly simple. Here's a sample of CSS code designed to format paragraphs (note the reference to "p") with the Aral font, but keep in mind that Dreamweaver will write the CSS code for you.
p {
font-family: Arial, Helvetica, sans-serif;
}
Javascript
Javascript is another supplemental technology that may or may not be used on web sites today.
One common example of using Javascript on a web page would be to create a rollover effect: the user moves their cursor over a button and it changes (color, size or shape). That's typically done with Javascript. (Note Javascript is not the same as the programming language Java though it is a scripting/programming language... but have no fear-
Dreamweaver comes to the rescue again: it will write and create some of the more frequently used Javascripts for you without you having to write the code yourself, but keep in mind the Javascript that Dreamweaver writes for you is typically created by using the Behavior panel in Dreamweaver and it represents a subset of some of the more frequently used Javascript functions, not the entire universe of Javascript functions.
You can hand code it all if you're proficient with xhtml, CSS and Javascript, (for a static web site, dynamic web sites also require server-side scripting) or you can use Dreamweaver, the swiss army knife of web design.
Any questions about any of the issues raised here please email me at: kdurso@nmultigroup.com
Static or Dynamic?
Web sites come in two basic "flavors": static or dynamic.
A static web site is one where the content you put on the pages: text, graphics, etc., doesn't change until you change it and update the web site.
A dynamic web site is one where the content changes "dynamically" typically based on user input. Think of Amazon.com, say you're interested in a book but you forgot the title but remember the author's name. You go to Amazon and you type in the author's name and hit "enter". After a second or two a list of all the books by that author appears on the page. That information is typically being pulled onto the page from a database or some other external data file, such as an XML file. (An upcoming post will have more information about how XML files may be used in web sites.)
Dynamic web sites are cool but the techniques and technologies used in them represent a leap above the technologies used in static web sites. If you're interested in dynamic websites you still need to master the techniques and technologies needed to create static web sites. (We hope to post an article soon here on dynamic web site technologies.)
When creating a Dynamic Website typically you also need to pick an application server and scripting language. The reason for this is that pages in dynamic web sites typically have code in it that executes on the server, unlike html pages on static websites. Because the pages are doing more on a dynamic website, you need an application server that knows how to interpret the code that's on the page.
Below a quick reference to other techniques and technologies you will use in creating any web site, whether static or dynamic but don't be intimidated by that, in almost every case Dreamweaver will create the code you need for you and please note that all of them (except creating graphics, which is a separate class) are covered in our Dreamweaver Web Design class: http://www.multigroup.com
Graphics
Dreamweaver (or any other product that allows you to create or manage web sites) does not create graphics. You'll need some other application to create graphics for the web. Again, we're some what biased but Adobe does produce the industry-leading products in this regard, too.
Photoshop, Illustrator and Fireworks can all be used to create graphics for the web. (See our post on Fireworks but keep in mind Photoshop and Illustrator are also great products for creating graphics for the web though if I had to pick one product it would be Fireworks, then Illustrator and then Photoshop.. in my opinion and given my proclivities. (We hope to devout an upcoming post on the differences between Photoshop and Illustrator.)
Both Photoshop and Illustrator have their strengths and weaknesses and in the best of all possible worlds if you're serious about designing for the web and print you would use both.
Graphics formats that are supported on the web are: gif files, jpeg files and png files.
All of the above listed products can output these files.
HTML and XHTML
Web pages are basically html files, each html file is another page. Dreamweaver writes the html for you, strictly speaking no knowledge of html requited but in practice a little knowledge of html helps. (We provide html basics in our Dreamweaver class.)
Keep in mind that html is not a programming language, it's a mark up language and relatively simple to understand and use. Years ago I worked in a publishing company and I would watch the typesetters sitting in front of dedicated computers used only to set type for a magazine.
If they wanted to indicate to the computer that a word should be bold they would put the word inside of a bold tag. When printed by the computer those words would appear bold. Well that's exactly how html works, except it's the browser that makes the words bold when it sees the appropriate html tags around the word.
Note that html was not what was used way back when I worked for the publishing company with the dedicated typesetting machine. However that language was one of the sister languages to html created from SGML (Standard Generalized Markup Language).
For More information SGML and how it relates to HTML see the Wikipedia article:
http://en.wikipedia.org/wiki/SGML#Original_uses
XHTML is html's younger brother. For all intents and purposes you can simply think of it as the latest version of html and it is recommended that you use it. (The latest version of Dreamweaver will write xhtml for you by default and there is no practical reason that I can think of why you shouldn't.
For more informaton on XHTML see the Wikipedia article:
http://en.wikipedia.org/wiki/XHTML
Cascading Style Sheets
Cascading Style Sheets (CSS) are a required supplemental technology in creating and maintaining web sites these days. (See our blog entry on using CSS to format text.)
We provide substantial information about using CSS both to format web pages and to create layouts with div tags, and you're in luck again because Dreamweaver will write the CSS code for you too, and CSS while not exactly a mark up language is also fairly simple. Here's a sample of CSS code designed to format paragraphs (note the reference to "p") with the Aral font, but keep in mind that Dreamweaver will write the CSS code for you.
p {
font-family: Arial, Helvetica, sans-serif;
}
Javascript
Javascript is another supplemental technology that may or may not be used on web sites today.
One common example of using Javascript on a web page would be to create a rollover effect: the user moves their cursor over a button and it changes (color, size or shape). That's typically done with Javascript. (Note Javascript is not the same as the programming language Java though it is a scripting/programming language... but have no fear-
Dreamweaver comes to the rescue again: it will write and create some of the more frequently used Javascripts for you without you having to write the code yourself, but keep in mind the Javascript that Dreamweaver writes for you is typically created by using the Behavior panel in Dreamweaver and it represents a subset of some of the more frequently used Javascript functions, not the entire universe of Javascript functions.
You can hand code it all if you're proficient with xhtml, CSS and Javascript, (for a static web site, dynamic web sites also require server-side scripting) or you can use Dreamweaver, the swiss army knife of web design.
Any questions about any of the issues raised here please email me at: kdurso@nmultigroup.com
Friday, January 18, 2008
Photoshop, Illustrator or...Fireworks
We see a lot of people taking web design classes at our Adobe authorized training center the Multimedia Resource Group
that are confused. They want to use Dreamweaver to create their websites, a great product and the number one product on the market for creating and managing websites, but it doesn't create graphics. Their confusion: Photoshop or Illustrator...which one should they learn first if they are primarily interested in creating graphics for a web site?
I usually surprise them by saying if they don't yet know either of those two great products (both of which can be used to create graphics for the web) I'd recommend Fireworks... Adobe Fireworks.
Usually this evokes a quizzical expression on the person's face. Chances are they've never heard of Fireworks or perhaps heard of it but don't know much about it. I then go on and explain: Fireworks was a product that Macromedia developed to create graphics for the web. That's all, just graphics for the web. They had bundled it with Dreamweaver. It's a great product that combines aspects of both Photoshop (bitmap/rastor graphic editing) and Illustrator (vector graphic creation). It exports gif, jpeg and png files, all of which can be used on the web.
And, just like Photoshop and Illustrator, Fireworks allows you to "slice" a layout, in other words exporting the pieces of the layout as individual graphics like a jigsaw puzzle, and exporting out the html file, taking those "pieces" (the slices, the exported graphics) and putting them back together for you in a web page (an html file). Which you can then open up in Dreamweaver to continue working.
Photoshop and Illustrator are great products with lots of bells and whistles for creating graphics for print and the web. Fireworks was created specifically to allow you to create and optimize graphics just for the web.
If you just need to create graphics for a web site, and you don't already know Photoshop or Illustrator, you owe it to yourself to check out Macromedia, oops... I mean Adobe Fireworks.
A one-stop solution to your web graphic needs.
that are confused. They want to use Dreamweaver to create their websites, a great product and the number one product on the market for creating and managing websites, but it doesn't create graphics. Their confusion: Photoshop or Illustrator...which one should they learn first if they are primarily interested in creating graphics for a web site?
I usually surprise them by saying if they don't yet know either of those two great products (both of which can be used to create graphics for the web) I'd recommend Fireworks... Adobe Fireworks.
Usually this evokes a quizzical expression on the person's face. Chances are they've never heard of Fireworks or perhaps heard of it but don't know much about it. I then go on and explain: Fireworks was a product that Macromedia developed to create graphics for the web. That's all, just graphics for the web. They had bundled it with Dreamweaver. It's a great product that combines aspects of both Photoshop (bitmap/rastor graphic editing) and Illustrator (vector graphic creation). It exports gif, jpeg and png files, all of which can be used on the web.
And, just like Photoshop and Illustrator, Fireworks allows you to "slice" a layout, in other words exporting the pieces of the layout as individual graphics like a jigsaw puzzle, and exporting out the html file, taking those "pieces" (the slices, the exported graphics) and putting them back together for you in a web page (an html file). Which you can then open up in Dreamweaver to continue working.
Photoshop and Illustrator are great products with lots of bells and whistles for creating graphics for print and the web. Fireworks was created specifically to allow you to create and optimize graphics just for the web.
If you just need to create graphics for a web site, and you don't already know Photoshop or Illustrator, you owe it to yourself to check out Macromedia, oops... I mean Adobe Fireworks.
A one-stop solution to your web graphic needs.
Subscribe to:
Posts (Atom)