So today I’m beginning a new course called Photoshop CC for Web Design and here I’m going to learn how to create mockups of websites by using Adobe’s Photoshop CC.
Now, the days of having the content of our websites viewed purely on desktop devices is over. This content is now being consumed on hundreds of different types of devices, all of which have different screen sizes, operating systems, and resolutions that web designers have to deal with.
Basically, that means that we need to be aware and concerned about how this content will look on devices like an iPhone, a Google Nexus, an iPad, and even a Kindle device. And that’s just to name a few.
For web designers this means that workflows must evolve to keep pace with the rapidly changing landscape that is the mobile Internet. Whereas designers used to be able to get away with using just Photoshop to mock up a desktop site, now they have to use Photoshop in conjunction with other apps like Edge Reflow in order to ensure the content will look its best across all screens and devices.
As I begin these lessons to evolve my workflow to meet these demands, I’ll need to keep these things in mind:
Simply, the game is changing all around us as designers. We have to adapt to this and prepare ourselves as best as we can so that we can deliver the products that our clients are inevitably going to ask us for.
A big question that many aspiring web designers may ask is “Why should I bother using Photoshop?” In the next video of the course, I learn some of the pros, and some cons, of using Photoshop for designing web mock ups.
Here are some pros for using Photoshop for web design:
And here are some cons:
Now in defense against the last point of the “pain points”, that feeling of this being “double the work” really only applies to you if you’re a designer capable of coding your own web sites. Even so, this point is a big deal to many people and a big reason why many modern web designers are opting to just, what is called, design in the browser and leave Photoshop to just handle the small stuff, like graphic elements that they need along the way.
Many also claim that abandoning Photoshop will save you some time. Below are two images of what a typical “old school” workflow looks like and a typical “new school workflow looks like:
They each have six points to their workflow, so really these probably both take around the same amount of time to complete.
Next, my course video helped to have a better understanding of the difference between resolution and pixel dimension or screen size. For many years, it’s been assumed that we should alway s design our web graphics in a 72 pixel per inch or dots per inch resolution. In today’s day and age we have to deal with many device types and screen resolutions. For instance, Apple has a series of retina devices that go into its iPad, iPhone and even now. Macbook Pros.
There are also many other devices and screens that go even higher than 72, like 150 or 240, and even higher than that. They key thing to remember here is that no matter what resolution, the pixel dimension is what counts win what stays the same. The pixel dimension refers to the actual amount of space an object takes up on screen, regardless of the resolution or screen size.
Below is an example of three different screen sizes showcased.
Directly in the middle of each one of these screens sizes, you will see a small white circle that takes up 200 x 200 pixels of actual space. But as you’ll see, when we start to move through these screen sizes, the circles are going to look as though they’re becoming smaller.
For instance, if I were to turn off the 1024 x 768 screen and move to the 1440 x 900, we still have that same 200 x 200 circle in the middle, but it looks much smaller now because it’s surrounded by a much bigger pixel area.
Now, we’ll go from the 1440 x 900 all the way up to 1600 x 1200, and the circle is even smaller, directly in the middle of the screen.
This is because there are more actual pixels in the screen, making it look as if this graphic has gotten smaller when in fact it’s just on a different size canvas. Making it appear to be smaller than it actually is.
To really see this in effect, I’ll show a jpeg image of two laptops with the homepage of lynda.com open.
On the left-hand side we have a higher resolution screen, which is 1680 x 1050, and on the right-hand side we have 1024 x 768. The home page doesn’t change at all, the pixel counts all remain the same of all the graphics and everything. It’s just with the monitor on the right, you have less pixels on the screen, thus you don’t have as much room to show different things. On the left-hand side however, everything is exactly the same on the home page. Images, text, etc., but it looks as though things are smaller because we have more pixels that are able to be displayed on this higher resolution screen.
So as I get into my later lessons of this course, it’s important for me to remember and take into account the pixel value of my images that I’m creating mores that the actual resolution of the screen.
Leslie Nation 