Design a Sleek, Dark Mobile App Website

In this tutorial Eric Alli will be using Adobe Photoshop to design a sleek web interface that can be used for any mobile app website. He’ll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

Let’s begin by creating a new Photoshop document by selecting File > New. Set both the canvas Width and Height to 1100px, Resolution to 72, and the Background Contents to White. Next, Eric Alli needs to create two guides that will act as the container for his page. Select View > New Guide… For the first guide, set the Orientation to Vertical and the Position to 70 px. For the second guide, select View > New Guide… again and create another Vertical guide with the Position set to 1030 px. He should now has an outlined space that is 960px in width for our page. Next step is the background. Select the Paint Bucket Tool (G) and set your Foreground Color Swatch to “1e1e1e”. Then, click anywhere on the canvas to apply the color to our Background layer.