Authentic voices. Remarkable stories. AOL On Originals showcase the passions that make the world a more interesting place.
Go behind the scenes with some of the biggest digital celebrities to see what life is like when the blogging and tweeting stops.
The story of punk rock singer Laura Jane Grace of Against Me! who came out as a woman in 2012, and other members of the trans community whose experiences are woefully underrepresented and misunderstood in the media.
Documentary shorts conceived of and directed by famous actors. Jeff Garlin, Katie Holmes, Alia Shawkat, Judy Greer, and James Purefoy
Park Bench is a new kind of "talking show" straight from the mind of born and bred New Yorker and host, Steve Buscemi.
Digital influencer Justine Ezarik (iJustine) is back. After covering the world of wearable tech last season, iJustine is expanding her coverage this year by profiling the hottest tech trends across the country.
A 12 episode documentary series following 5 startup companies competing in the 2013 San Francisco TechCrunch Disrupt Startup Battlefield as they fine tune their products and eventually present in front of a panel of judges in hopes of winning $50,000 in funding.
Enter the graceful but competitive world of ballet through the eyes of executive producer, Sarah Jessica Parker. This behind-the-scenes docudrama reveals what it takes to perform on the ultimate stage, the New York City Ballet. Catch NYCB on stage at Lincoln Center.
Nicole Richie brings her unfiltered sense of humor and unique perspective to life in a new series based on her irreverent twitter feed. The show follows the outspoken celebrity as she shares her perspective on style, parenting, relationships and her journey to adulthood.
Explore what it means to be human as we rush head first into the future through the eyes, creativity, and mind of Tiffany Shlain, acclaimed filmmaker and speaker, founder of The Webby Awards, mother, constant pusher of boundaries and one of Newsweek’s “women shaping the 21st Century.”
Gwyneth Paltrow and Tracy Anderson spend time with women who've overcome hardship, injury, and setbacks to triumph in the face of adversity.
Hank Azaria’s touching, humorous, and often enlightening journey from a man who is not even sure he wants to have kids, to a father going through the joys, trials and tribulations of being a dad.
ACTING DISRUPTIVE takes viewers inside the businesses and passion projects of Hollywood’s top celebrities.
Learn how to set Layout Size and Guide Lines in Adobe Photoshop CS3.
Tags:adobe,adobe cs3 web design,guide lines,setting layout size,total training,tutorial,web design
Grab video code:
So far our project we have decided that we want to have as much control over the design and layout of the site. So we are going to go with a fixed web layout and we are going to optimize our site for 1024X768 resolution display, but do so in a way that will work on 800X600 displays. Now those 60% of all monitors are set to resolutions of 1024X768, it's important to consider your audience and for our site the audience is expected to be young and web savvy.
So we expect them to have displays set at higher resolutions. Having said all that let's start by creating a new Photoshop document. We already have Photoshop open so we will go to our File menu and we will select New. Let's type in a new title. For the document dimensions, let's take a look at the Preset dropdown. You will see that one of the Presets is Web. This will automatically convert the units of measurement to pixels.
Now in the Size dropdown there is a number of common screen resolutions listed. Since we are designing for 1024X768, that's the option that I am going to select and that gives me Width and Height of 1024X768. However, we really don't want to use these dimensions because someone is looking at our website, their browser chrome or the browser user interface inevitably takes up some of the real estate. Instead, I am going to input a Width of 955 in the Height of 600 pixels. By the way, I am getting these values from our Preset in Dreamweaver and the 600 pixels is important to remember as it determines the fold. Basically, content on our web page that falls the below 600 pixels will not be immediately available to our visitors using a 1024X768 resolution settings. They will have scroll down to see the rest of the content.
Generally, speaking people don't like to scroll. So when you are designing, you should keep this in mind and put the most important content up front. So let's Save these Presets by clicking on the Save Preset button this will bring up the New Document Preset dialog box. By default Photoshop retains all these attributes in the Preset. We will leave these options as they are and we will click on OK to create our new preset and then we will click OK again to accept these settings and let Photoshop create this new document.
So the layout that I have in mind is fairly straightforward. I am thinking about a two column fixed width layout with a header and a footer and a sidebar on the right-hand side. The content area will have a prominent Flash messaging area and a couple of smaller areas for other content features and video. So before I do anything else I want to make sure that the units of measurement used by Photoshop are in pixels. So I will open up my Photoshop Preferences by going to my Edit menu. On the Mac you can always find Preferences in the Application menu and go down to Preferences and select Units and Rulers. I want to make sure that both Rulers and Type are using pixels as their unit of measurement.
Now, of course, it's important to remember that pixels as a unit of measurement are well suited for web projects, but if you are working on a print project later on in Photoshop you will want to revert these Preferences back to Points and Inches. So we will click OK to accept these Preferences and now I am going to draw out some guides to help me visualize the page, so I know what part goes where. So I am just going to zoom into my document to 100% by pressing Ctrl+=, Command+= on a Mac and I am going to go ahead and go to my View menu and make sure that the Rulers are displayed and again to add a New Guide, I am going to go back to my View menu and select New Guide.
I have the option of inputing a pixel Position as well as the Orientation. So the first guide that I am going to enter in is 760 pixels and what this does is it just tells me the cut off point for an 800X600 resolution display. Again I will go back to my guides so I will go to View and New Guide and this time I am going to add a Horizontal Guide at 110 pixels and this will be the area that my header will occupy.
So before I add a new additional guides I am going to maximize this document. So I can continue adding guides by going to my View menu or I can actually drag the guides directly from the Rulers on to the canvas. So in order to do that I am just going to select the Info tab from my palette here and now I am just going to drag a guide down to 140 pixels and that is for my navigation. I am going to bring another guide in at about 350 pixels or so and this area will be my Flash messaging area and I also want to add another guide another at 420 pixels and this is really the fold for somebody that maybe viewing this page on in an 800X600 display.
And I am going to go back into my View menu again and add one more guide and it's a horizontal guide at 600 pixels and this is the fold for a 1024X768 display and I am actually going to go ahead and resize to the canvas just a little bit to 800 pixels and we are going to set the Anchor point to the top of the documents, so that the additional pixels are added to the bottom of the document and we will go ahead and click OK.