Tutorial #1 - Setting Up

Although its an easy step to skip, it'll save time and hassle later when you realize you need it, or you've made a mistake because you've skipped the basics.
I try not to skip the initial setup stages, although you won't need them 90% of the time, you'll be glad that other 10% that you don't have to backtrack or redo all your hard work simply because you missed a step or didn't follow the rules.
In the end its normally obvious to everyone including yourself whether or not you skipped a step or two.

Setup in this projects case means i need to create guides so i can frequently make sure the final piece accommodates both standard and widescreen viewings.
If i didn't accommodate both screen sizes then id be instantly missing a half of the available marks and the final product might not have most if not all of the assets visible.

Above is a sketch of how the guides should basically look in the end.

I first attempted creating these guides in photoshop since thats where i would be creating the assets next, however i encountered problems with the snap tool and centering the lines perfectly. So i followed the available tutorial step by step.

Although im not familiar with illustrator the tutorial was thankfully well timed, straight forward and clear.

Basically i created a document suitable for widescreen 1290x720 px, and made the guide lines for the standard screen with a no-fill square tool, manually typed in the dimensions of 960x720px, centered it with a snapping tool which aligned it with the widescreen.

So thats the standard and widescreen sizes sorted, but the tutorial also advises a safe frame guide as well, this basically means none of the assets should go beyond that line, im assuming this is similar to the guides in  adobe indesign, any type or assets outside that safe frame would be running the risk of being fully and partially cut off the screen.

The safe frame is 40px smaller than the standard so simple math says thats 880x640px, again centered. 

Next using the line tool i created the center point marker/cross, duplicated the line several times and placed the identical lines on all four sides of the standard screen guides, thus separating the standard and widescreen views into four simple quadrants that would allow me to easily locate any assets that should and shouldnt be in those areas. It should also allow me to assess how cluttered or bare certain parts of the screen might seem.

I saved the file, started up photoshop and opened the illustrator file by dragging the file/icon in from an open folder, which is alot easier than converting and changing file types. At this point the guides are in place and im ready to begin making the assets, using the next tutorial as basic guidelines.

Above is my final result from tutorial.1