Welcome to the second part of organising your workspace. If you haven’t read the first part go check it out. To summarise: In the first part we actually setup FireFox to optimize our research on web design.

Today we’ll be talking about photoshop and how to optimize it.

2. PhotoShop

“Adobe Photoshop, or simply Photoshop, is a graphics editing program developed and published by Adobe Systems. It is the current and primary market leader for commercial bitmap and image manipulation, and is the flagship product of Adobe Systems. It has been described as an industry standard for graphics professionals and was one of the early killer applications on the Macintosh.”

Sketching/drawing is the main key when designing a website. You can easily sketch on paper first and then try some details in PhotoShop. PhotoShop is mainly used to get a rough design of how the website would look. This does not mean it is ALWAYS used. Some design are pure CSS2/3. But off course this can always be in handy.

If your a student you can get PhotoShop most likely at a reasonable price. If not you can get a 30-day trial here (check trial link left).

2.1 easy organize

When creating a design of a web page, organisation is key. Keeping layers in folders enables you to quickly move or hide any layers that you need to. When creating a design, you usually make the same folders over and over again. Well this can be done in one step by using actions.

- First open PhotoShop and open your action menu. Do this by going to Window > Actions or use keyboard shortcut ( Alt + F9 ). If this is your first time running it: create a new set by clicking on the fourth button. (Call the set whatever you like)

-Now create a new action (fifth button from the left) and give it a name. Be advised, when assigning a function key, keep in mind that some keys (in range of F1-F12) are already in use.

  • F1 - Adobe Online Help
  • F5 - Brush style palette
  • Shift + F5 - Fill Layer Dialogue Box
  • F6 - Colour, Swatches, Styles palette
  • F7 - Layers, Channels, Paths palette
  • F8 - Navigator, Info palette
  • F9 - Actions, History, Presets palette

-After you’ve pressed record create a new canvas that is suitable for your web design layouts. Go to File > New… or use keyboard shortcut ( Ctrl + N ). After the files is created, go to your layers and start making your folders like followed:

-Now hit the stop button to stop recording your mouse clicks and test you action to make sure no mistakes are made. Actions can come quite in handy for doing repetitive procedures (like for example applying styles or saving several works). Be creative I’d say and try to figure out what actions may shorten your time of work.

Check PanosFX, atncentral or visual-blast for some really handy actions.

3. TextEditor

Okay first off, don’t use Dreamweaver or some other technical web page maker. Why? Cause it’s unnecessary. You wont be using 80% of all features anyways. The less the better. You should really learn using one of these two text editors. They are very easy to manage and use.

3.1 Textpad

Whether you simply need a powerful replacement for Notepad, a tool for editing your web pages, or a programming IDE, TextPad does what you want, the way you would expect. Frequently used combinations of commands can be saved as keystroke macros, and the spelling checker has dictionaries for 10 languages.

3.2 Notepad ++

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL Licence. Also, don’t forget to check the plug-in directory.

3.3 Jedit

jEdit is a mature programmer’s text editor with hundreds (counting the time developing plug-ins) of person-years of development behind it. To download, install, and set up jEdit as quickly and painlessly as possible, go to the Quick Start page. While jEdit beats many expensive development tools for features and ease of use, it is released as free software with full source code, provided under the terms of the GPL 2.0.

My advice, use one of these three. They are very user-friendly and also free. Take your time testing each one of them and get used to it. This will certainly spare you a lot of time later on.

If you have any questions concerning these programs, you can mail me or use this comment form.

THIS IS END OF PART2

4 Responses to “Organize work for webdesign - PART2”

  1. [...] More: Organize work for webdesign - PART2 [...]

  2. [...] Vote Organize work for webdesign - PART2 [...]

  3. [...] bookmarks tagged webdesign Organize work for webdesign - PART2 | Goowik Desig… saved by 2 others     thevillageother bookmarked on 12/21/08 | [...]

  4. I love keep coming to your blog as it always has interesting information for me, thanks for the hard work you do!

Leave a Reply