: How images in flat design websites are created? First, I would like to know if the images in this portfolio screenshots? Then, are the images in this web page screenshots of the website? Otherwise,

@Karen819

First, I would like to know if the images in this portfolio
screenshots?


I don't think we can know for certain but my guess would be yes they are screenshots. Since that site is selling templates I am guessing the screen shots are of the actual template website and not just a mockup. But the creator could have made that in a image editing program.


Then, are the images in this web page screenshots of the website?
Otherwise, how did the designer draw these images?


Yes they would have needed to draw every detail (unless they used some pre-made objects). The above image is a lot of copy paste shapes. For the laptop the designer would create the website look in a 2D plane and then distort the objects to match the laptop perspective.


how were they drawn in general? The designer needed to draw every
detail?


Using various tools and text in most likely a vector editing program. It may look like a lot at first but when you closely inspect the graphics you will notice a lot of repeating objects. So someone isn't manually placing each shape as there are functions to copy paste objects at specific distances from each other.

There are also a lot of already made product mockups for stock use that a designer could have used.



I re-made the tablet shown in your picture in about 5 minutes (I didn't do everything but you get the idea). It would probably take a little bit longer to make if I wasn't copying a design and had to think of what to create.

Vote Up Vote Down