We got a good jump on our Alien Auto Company image and branding. Now, let us shift things over to Photoshop and we are going to work on mocking up a webpage. Got a little starter fire set up in here, so I am just going to “File” and “Open” and inside the Lesson 3 Assets folder, we got a file called Color Layout.

Now, this is a pretty simple file but we are going to use this to establish the basic settings for our project. Notably, the color but we will also start with the size. Now, our goal here is to create a mock up of a webpage, probably the homepage since that is where we will be starting things off for the company.

We have chosen to go for kind of a modern look, a little bit business oriented but not too stiff that is why we started with a gray background instead of something like black or white. We are going to go for modes of gray to set up the background elements and you can see that we got this lighter gray shade at the top. We are going to use that to divide the main header elements and the navigational elements from the content of the page.

Now, let me also point out the size of the document. I am going to switch the display tab down at the bottom here to document dimensions and we can see with the pixel measurement that we are starting off with 750x500 pixels.

Since our goal is to have this auto web browser, we are setting it up so we are designing for a base 800x600 monitor screen and we are giving a little bit of space for the browser buttons and things like scroll bars on the side. Now, I want most of my main design to fit in here but as we go along, we are going to make sure that our design will work on a taller page we might using as to scroll down for more content.

Now, I do have a couple of other layers installed here. We got one that is going to give us a look at the color palette that we are going to be using. We are going to be using these colors to accent our design. It is keeping us with that classy, modern look and adding up a little up a façade to it as well.

Now, we got a little layer down in here to further subdivide our content area. Very typically on webpages, you are going to have a minimum of two main content sections and we are going to use that background color to allow those sections to be separated in user’s mind that is still together and cohesive with the rest of the design. Now, I am going to start bringing in some elements, so that we can actually markup this webpage. We wanted to look exactly like it will look or at least as close as possible when it gets to a browser in the finish state.

Now, that is for two reasons. One is we want our client to be able to use this to approve the design before we have to go and build a website out of it but we are also going to be using this as our main source of material when we actually go to build the website. Those considerations will crop up as we start putting our design elements in.

Now, the next thing I want to do is I want to bring in some graphics that we are going to be pulling in from both the client and some stock image sources that are going to also enhance our design and keep that branding and Alien Auto customization car thing going. I am going to use bridge to gather those up. So, we will just click on, go to “Bridge” key up here at the top of the Photoshop and we will bring up the bridge panel.

Now, as you probably seen, bridge is just a great place for me to gather up assets, select what I am going to be using project file and open them up. That is all I am going to be using it for in this particular case. I got a whole bunch of files in the Assets folder under Part 1, Lesson 3.

Now, you can see in here we got a few different JPEG files, some of them are the alien employees and some of them are car projects they have worked on, so I am going to bring those on in. All of these elements are going to be used some place on our homepage. So, I will just start off by bringing in all the JPEGs.

I am going to use my “Ctrl” key here on the PC to be able to select them all and you can use the Apple key on the Mac to make these discontinu