Setting up (Part 2)

We’ve talked about setting up a XAMPP server and WordPress already in my previous tutorial. Now let’s focus on setting up Photoshop and Dreamweaver for Web Development. If you don’t have Dreamweaver, don’t worry about it. This is not only for PHP but it’s also a basic set up for all Web-Development. Different developers prefer different program.s

A little background on all of this. Adobe Photoshop is by far the best photo editing software out there. A nice alternative for photo editing would be GIMP; unfortunately when it comes to web development, it’s basically useless. It’s a pretty expensive piece of software but for a good reason. Photoshop is just amazing.

Now, about Adobe Dreamweaver. A lot of web-developers do not like this software. It’s one of those “what you see i what you get” types of software. If you learn to work, you’ll find out that it’s pretty good but when it comes to JavaScript and PHP, there are a lot of better alternatives. I use Dreamweaver simply because PHP is not all I do.

Here’s a small list of other code-editors:

jEdit
Notepad++
here’s a list of HTML editors
here’s a comparison of many different HTML editors

Here are some specialized PHP editors:

Zend (this is the best known PHP editor)
UltraEdit
Here’s a list of PHP editors

I recommend you use Zend if you’re solely going for PHP and if not then try to get Dreamweaver. It has a nice interface and it’s easy to use. If you can’t, and don’t have the money, check out the lists and comparisons and choose the one for you, there are many free options. I’m not a specialist over all these programs, and one day, I will have to try them out but for now, I will use my beloved Adobe products.

Photoshop Setup

I use Photoshop CS4, so bear with me if you have an older version. Most of the set-ups should be the same, and if there’s a discrepancy, message me and I’ll help you out.

Photoshop CS4

Click on the picture to see the whole thing. As you can see, Photoshop has a basic set up.

Tools – Here are all the basic tools you can use with Photoshop. Keep it one column because you need as much as you can get. If you have a large monitor, then don’t worry about it and make the toolbar two-column by pressing the following button.
Work Area- This is where you’ll be working. This is your canvas. You can either make a blank canvas or have the canvas filled with a color. I recommend these settings for web development:
Canvas Preset

The 1300 x 1200 ratio is the best I think. Click on Save Preset and save it. This will save you some time when creating the document. If you find the height of the document is inadequate, use the crop tool:

Crop

While using the crop tool, simply drag the rectangle down and press enter, this will extend your canvas. Also, I know 1300 width seems like a lot but it’s a good working area. While using Photoshop for a template, try to keep all your work centered. Just as in most websites, the center is the key and the rest around is usually the background.
Setting - This part of photoshop is meant for tool settings. I’m not going into detail about this section because there are a lot of settings, and I assume you have some Photoshop experience. If not, there are plenty of tutorials that can teach you all that.
Pallets – Here are the pallets. They’re basically more tools and useful adjustors in Photoshop. You have the layers pallet, the most important one I think, and many other ones that are concerned with color and all that. While designing and creating new graphics, though, you’ll certainly make use of the adjustment layers and the brushes pallet. The “adjustment layers” are there by default as are the “layers” and “swatches”. If you double click on the name in the sidebar, the pallet will enlarge or minimize. Click on the “brushes” pallet, it should show up in another sidebar next to the default one. Minimize that with the arrows on top, the same ones as in the toolbar. Before I forget, click on view>>rulers. This will show you the rulers which are very useful.
The Menu – Here are all the menus at your disposal, from the file options to the filters and windows. Here’s where most of the setting up takes place. Go to edit>>menus. This is not mandatory but it’ll speed up the process of making a template:
Menus

Okay, you can collapse and expand these with the triangle on the let by a.. Here’s the set-up, under a. are the names of the menu choices. b. is the visibility, ie. if the given menu choice will be visible and with c. you can assign a color to the menu choice. Choose the tools you think you’ll be using the most such as under the edit menu, I highlighted: Define Brush Preset, and Define Pattern.

I have my own workspace set up that you can use, here. Download and copy the file to this location:

C:\Documents and Settings\”your username”\Application Data\Adobe\Adobe Photoshop CS4\Adobe Photoshop CS4 Settings\WorkSpaces

The pathway may be different when you use Vista so if you can’t find it, simply search your computer for “Adobe Photoshop CS4 Settings” and it should come up. Then, while under Photoshop, go to window>>workspace and find the file name (Alexander’s Web). Click yes when it asks you about the menu and you’re done.

Two more things to do and your photoshop will be all set-up. You’ll need a grid plugin for your photoshop. I’ve found two really good ones. One is the Grid-Generator and the other is the Grid-Maker. They’re both free so I installed them both. Download the Grid-Generator and install it in your plug-ins folder under C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins

Here under Grid-Generator, you’ll actually be creating a new separate layer with a grid. You can choose how many lines, or partitions, you want of the picture and the transparency of the black background or the white lines. You can choose the color of the lines as well.

Save the Grid-Maker under: C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Scripts

With the Grid-Maker, you can choose to only show vertial, horizontal, or both guides. The “Configuration” shows where the grid lines will be. “3, 64″ means that after the first three pixels will be made a guide, and 64 pixels later another guide, then the process will be repeated for the maximum width of 1024.

The Grid-Generator will show up in the filter menu in photoshop under “Richard Rosenman” and the Grid-Maker is under File>Scripts.

Anyways, that’s it for photoshop. It’s not much but it will increase your workflow. You’ll find it easier to find the filter you’re looking for and the different menu selections. Also, this setup is meant to show the most workspace area. The grid plug-ins are the most essential part to webdevelopment because with these, you can create a column system, even a gutter and that will help you create a nice clean web design.

DreamWeaver

Dreamweaver set up is a lot more fun when compared to photoshop. You don’t need any plug ins and all you really have to do is set up a new website. So here we go, load up your Dreamweaver. I use Dreamweaver CS3:

Click on the picture to enlarge:

SplashScreen: This is what you’ll get when your Dreamweaver starts up. You have a choice to open a recently used document, create a new document, and create a new document from a sample. Once you have your document open, you’ll get this screen:Here, you see that you have a tab on top. When you open multiple documents, you can switch between them using the tabs (same concept as in Photoshop CS4 and Opera). Then you can switch views between only code, split, or design. When you’re doing PHP, don’t expect to see any results when you click on design, it will only show you a PHP icon so when using php, stick to the “code” view.
Properties: The properties vary according to what you select. It gives you the option to change fonts, implement CSS, you can mess around with your PHP using the properties bar but all in all, it’s like an options docked pallet that will show you all you can do while selecting something.
The Docks: Same concept as in photoshop, you have a bunch of docks that serve different functions. The mainly used one is “files” which will show you all the files in a given folder. You have an option create a “website” wherein DreamWeaver will manage that site’s folder. You can also mess around with the CSS and do all kinds of things using the Docks.
Tools: Here we have the tools. All interesting stuff that adds to the “What you see is what you get”. I’m honestly not to concerned with this part because I try to do all the coding myself but just in case you forget how to code something in HTML, or wants some help, the tools are available to you. They can create forms, divs, well just about anything you want in HTML. The “PHP” tab is honestly of no help at all so ignore it.

That’s it for DreamWeaver overview, I’m sure I didn’t teach you much of anything and that’s because you don’t really need to know. If you want to master DreamWeaver, check out the DreamWeaver tutorials. I personally like to use DreamWeaver because it’s neat and efficient. Plus, it came with the Web-Design Custom Suite from Adobe.

So what do we need to actually set-up? Our website and folders!

Go to the top and click on site>>New Site.Site Name: that’s the name of your site. Like this site would be Dave Pc Guy

Local Root Folder: that’s the folder you want to store all your files in. Your directory should look similar if you followed my last tutorial.

You don’t have to set up the images folder right now, I usually don’t but here’s the example.

And here’s a setup for the Testing Server, you can omit this part and just open up the files independently of DreamWeaver.

And that’s it, here’s the result:Your files dock will look similar to this one (devoid of all those files I put there). Now every time you boot up DreamWeaver, you can start working on your files immediately, switching between them, opening multiple files etc.