Golden Spiral, Golden Rectangle + Golden Design
At this juncture, we have devoted a significant amount of time to understanding and researching the History of Graphic Design and the Golden Ratio… time to get our hands dirty, and see if we can implement the concepts we have learned with the Golden Ratio.
For this Workshop we will be using Photoshop…
Welcome to Adobe Photoshop. Adobe Photoshop is the leading image editing software program on the market today. The ability of Adobe Photoshop to manage, edit, and manipulate documents is an industry standard with endless possibilities that include the communities of digital arts, interface design, architecture, advertising, photography, and many more.
Beginning Photoshop + Golden Spiral from BCC Multimedia Arts on Vimeo.
After opening photoshop, per the upcoming exercise on developing a page layout for the Deep Space section of our course, we will need to create a new document.
1. Begin by opening your Photoshop Application, proceed to the top left of the application window, look for the tool bar, and Select “File” with your cursor. A drop down menu will appear, at this point select “New”.
A new window will pop up, requesting what we want for the dimensions of the Photoshop Canvas. This is the part of the discussion, where I am usually asked, “What are the best dimensions for a Web Page?”
This answered is varied, mainly because as a web designer you can not control the screen size of your future viewer. When we are working with static-sized web sites, the general consensus is that the norms for typical monitor dimensions about or below 1024 pixels (width) by 768 pixels (height).
Referenced from : http://www.w3counter.com/globalstats.php
Notice: you will notice that the #1 ranking dimension is 1366 pixels by 768 pixels… Why are we still designing for 1024 pixels by 768 pixels then?
Your website will not occupy the entire dimensions of the monitor’s screen, therefore we will create a display dimension a bit smaller, the dimension we will select is 960pixels (width) by 750pixels (height).
In this scenario, we WILL NOT construct our canvas for scrolling sites, if we wanted our site to include scrolling dimensions, we would be looking at a size closer to 960pixels (width) by 1500pixels (height).
2. At this point you may be unsure about the view of the application, and if it is in a default layout. You can return to the top tool bar and look for the selection of “Window” > “Workspace” > “Essentials”.
Under the Window drop-down menu you will also see the listing of other panels which you may want to make appear or disappear at different moments, for example the “History” selection which is currently checked or the “Layers” selection that is also checked.
3. On the bottom right hand side you will see your layers area. Layers were ushered in with the update of Photoshop 3.0. This advancement brought huge excitement. You will notice a little lock on the first layer, this is up to you if you want to unlock it or not, it depends on the occasion if you want it locked or unlocked.
To create a new layer, you select the paper like document in the bottom right hand corner.
To create a new group or a folder to place multiple layers into. You select the folder icon next to the paper icon.
To turn a layer on or off you can click on the eye.
Layers are extremely important for three reasons: 1. If the right layer is not selected you could be modifying the wrong portion of your document. 2. They are great to organize the different elements that are involved in your project. 3. They allow for organization of elements and the ability to modify for future issues.
4. When we view the tool bar, you will notice that there are little black triangles in the bottom right corner of each icon. The little triangle is an indicator that there are similar tools when you select that icon. The tools that expand when you select that icon, provide additional options that may be specific for your document.
For example with the Rectangle Tool, the additional options are: Rounded Rectangle Tool, Ellipse Tool, Polygon Tool, Line Tool, and Custom Shape Tool. When creating a shape, Photoshop provides you with additional pre-made options if a basic rectangle does not fit your design plan.
Shortcut Keys: When looking at the tool bar, specifically the Rectangle Tool, you will notice the letter “U” to the right of the name of the tool. When you press the letter “U” on the keyboard, it will activate the Rectangle Tool for usage in the Photoshop Canvas. If you hold “U” and continue to press the “Shift”, you will rotate through the additional tool options, which are initially hidden, until you press the triangle in the corner.
5. With the basic understanding of the organizational structure of the tool bar, we can begin to familiarize with the functions of some of the tools. The “Move tool” or “Arrow” tool is the bedrock of functionality for Photoshop. This tool will move objects, layers, text, masks, etc… to different pixel positions on the screen. The quick key for this tool is “V”, and if you are utilizing this tool while in the process of another tool… you can press “Control”, when you release the “Control key on your keyboard you will be back to the previous tool selected.
6. The “Rectangular Marquee icon” and the set of Marquee tools are below the “Move” tool. This icon that looks like a rectangle formed by a dotted line.
The Rectangular Marquee tool makes rectangular selections and the Ellipse Marquee tool creates ellipse selections. If you want to keep the dimensions of the Ellipse Marquee or the Rectangular Marquee equal, hold down shift. The Marquee tool sometimes can stay around longer than you wanted, in this situation select Command + D, and the Marquee selection will disappear.
Note: The other two options in the Marquee tool set (Single Row Marquee Tool and Single Column Marquee Tool) will not be utilized in this tutorial.
Go ahead and create a new layer, then create a rectangle with the marquee tool.
Note: the rectangular marquee tool creates pixel perfect borders, while the rectangle tool does not.
7. After we created the marquee square we can use the paint bucket to add color to our square. By selecting the paint bucket tool and clicking the paint bucket within the square, we will be able to change the color of our square.
The color selected will be the color currently showing in the set foreground and set background squares on the bottom of the tool bar. To change these select the squares and choose a color within the pop up window that appears.
8. Now we will duplicate the layer. This can be done by selecting the layer with a right click, a drop down menu will appear, then we will select to duplicate the layer.
9. If we make a mistake we can move 1 decision backwards by selecting “Edit” from the top timeline and then “Undo” or we can use our keyboard quick keys and press “Command” + Z”.
10. What happens if would like to go backwards, and fix a mistake that may have happened more than 1 decision ago? In this instance, you can open up the “History” window, by going to the top tool bar, selecting “Window”, then highlighting “History” with the cursor.
Now you will want to click on the empty beveled box next to the individual history thumbnail and description. After selecting it you will have a paint brush appear in the box. Drag that layer to the little garbage in the bottom right of the history window. You will need to do this one at a time as needed to undo choices/selections you have made.
