The basic principles of website usability
What is site usability? Today we will talk about one very important characteristic of the site — the usability of the site. What is "usability" (from the English. Usability —…

Continue reading →

domino qiu qiu
How to start earning a web designer on the Internet?
How to start a web designer career? Web design is a kind of art. It contains its own trends, abundance of styles, various rules and canons. In my opinion, the…

Continue reading →

All about web design trends
This is absolutely true for web design, as often a certain design movement is born, gets support, and then many sites either borrow it or stay away from it. Be…

Continue reading →

Dark site design

As for the code
If you are a Tuts+ premium user, you can skip to the full code of this tutorial. Eric will tell you in detail how to encode this design in HTML/CSS template!

For beginners, I will explain that Tuts+ Premium is a service that provides a top opportunity to learn and practice skills in a variety of creative areas. Whether you prefer books, visual training or advanced courses, we will provide you with any information. Although, unfortunately, we are not able to provide the service for free, it costs only $19 per month – less than you would spend for dinner.

So, okay, now let’s move on to the free design part on tut!

About design
The basis of this tutorial is a clean, dark-colored website design for Leaflet, an iPhone app created for Envato marketplace publishers. Eric Ellie (Eric Alli) from Trilab Media helped to create and encode the site, so you can step by step to explain to us the whole tutorial. Whether you plan to apply such a design in your projects, or just want to know how it is made – you can learn from our tutorial a lot of great techniques and techniques. Enjoy!

Step 1
To create a dark website design, start with a new Photoshop document by selecting File/File > New/New. Set the Width/Height and Width/Height of the canvas to 1100px, the Resolution/Resolution 72 and the color of the background Contents to White/White.
Next, you need to create two guides that will serve as a container for our page. Select View/View > New guide/New Guide…
For the first guide set the Orientation/Orientation to Vertical/Vertical, and the Location/Position of 70 px.
For the second guide, again select View/View > New guide/New Guide… and create another vertical guide with the Location/Position set to 1030 px.
Now our page should have a framed space of 960px width.
Step 2
The next stage in the creation of the dark design of the site is the background. Select the Fill/Paint Bucket (G) tool and set the foreground/Foreground Color Swatch color group to “1e1e1e”. Then click the canvas to apply the color to the background layer.
Also let’s assign a texture to the background by selecting Filter/Filter > Noise > Add noise… Set / Amount to 2.5 and click OK.
Step 3
Next, we need to make a light spot, with which attention will focus on the upper area of the page. Take the Brush/Brush (B) tool, select the Base diameter/Master Diameter at 400px and set the Stiffness/Hardness at 0%.
Create a new layer by selecting Layer/Layer > New/New > Layer/Layer… and name it “Spotlight”.
Change the foreground/Foreground Color Swatch color group to “FFFFFF” (white) and create a circle at the top of the canvas using the Brush/Brush tool.
To mix the light spot with the background, let’s add noise to the spot layer by selecting Filter/Filter > Add noise… Set/Amount to 20, tick Monochromatic/Monochromatic and click OK.
To smooth the light spot, select Filter/Filter > Blur/Blur > Gaussian Blur… Set the Radius/Radius to 50.0 and press OK.
Finally, set the Opacity/Opacity of the Spotlight layer to about 25%.
Step 4
Next, you will add graphics of the phone. For this tutorial, I’ll take the iPhone from the gorgeous Vector PSD iPhone 4 (Vector iPhone 4 PSD) from the Psdtuts+ site, which you can download for free here. In addition, remember that you can use the graphics of any suitable phone for you (Android, Blackberry, etc.).
Once the download is complete, open the PSD in Photoshop. Expand the “Phones” folder in the layers panel, right-click on the “FRONT” folder and select Create duplicate group/Duplicate Group… Give the group a memorable name (I called “iPhone”), set the destination to “Leaflet” (or whatever you called the PSD for this tutorial) and click OK. When finished, close this PSD.
Position your first iPhone so that it touches the left rail and is about 100px from the top of the canvas.
Now is a good time to modify the screenshot inside the iPhone. This is easily done by expanding the iPhone folder in the layers panel and then clicking on the SCREEN CONTENTS folder. Now select File/File > Place, select your screenshot from the browser and click Place.
Drag the placed layer onto the iPhone and resize it to match the screen. When you are done, press Enter and save your changes.
Duplicate the “iPhone” group by selecting Layer/Layer > Duplicate group/Duplicate Group… name it “iPhone 2” and click OK in the dialog box.
Select Edit/Edit > Transform/Transform > Zoom/Scale and expand the copied iPhone to 107.0% of width and height. Position it about 50px from the top and 200px from the left rail.
Repeat the above steps to replace the screenshot inside the iPhone 2 folder.
Step 5
The final touch of our iPhones is the creation of their reflection. Let’s start by selecting both iPhone groups (“iPhone” and “iPhone 2”), then select Layer/Layer > Duplicate layers/Duplicate Layers… and click OK. Then select Layer/Layer > Merge layers/Merge Layers.
Next, we need to reflect our iPhones. Select Edit/Edit > Transform/Transform > Flip vertical/Flip Vertical, then position the reflected layer directly below the original iPhones.
Add a Layer mask/Layer Mask by clicking the layer mask icon in the layers panel.
Take the Gradient tool (G) and select a group of colors from black to white. Draw a line from top to bottom about 50px in height on the reflected iPhones.
Finally, reduce the opacity of the layer to 30%.
Step 6
The next step is to add basic app properties to the right of our phones. Before we get started, let’s add another guide so that everything is aligned. Select View/View > New guide…select the vertical orientation and location of the 550 px.

Font Family: Helvetica Neue

Size: 16 px

Style: Regular

Leading: 26 px

Tracking: -25

Anti-aliasing: Crisp

Color: #FFFFFF
Step 7
Next, we will create a button for visitors to buy a web application in the layout of our site with a dark design. Using the Rectangle tool with rounded corners/Rounded Rectangle (U), draw a rectangle 240x75px with a radius of 4px. Align it so that the left side of the button touches the center guide and it is 45px below the text.
Now apply layer styles. Double-click the right side of the layer in the layers panel, then check the image below.
To add an Apple icon, draw a small text field inside the button using the Horizontal text/Horizontal Type (T) tool, then copy and paste this symbol:  into the text field and set the following characteristics:

Font Family: Helvetica Neue

Size: 50 px

Style: Regular

Anti-aliasing: Crisp

Color: #000000
Finally, change the opacity of this layer to 30%. On the right, create another text field and add two lines (e.g.: “Download from App Store”). Apply the following settings:

Font Family: Helvetica Neue
Size: 11 px (first line) 24 px (second line)
Style: Bold
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF
Next, we are going to add a separator to the right side of the text we just added. Select the Line/Line (U) tool and hold down the SHIFT key to draw a 1px line from the top of the button to the bottom, then change the line color to “FFFFFF” (white).
Set the opacity of this line to 15% and duplicate it by selecting Layer/Layer > Duplicate layer/Duplicate Layer… click OK. Change the color of the duplicated line to #000000 (black) and its opacity to 10%. Then slide the duplicated line 1px to the left.
The last item we will add to this button is an icon indicating the download. Start with the Ellipse tool (U) and create a circle with a diameter of 25px.
Finally, take the Arbitrary shape/Custom Shape (U) tool and select the pointer arrow (I use the default shape named “Arrow 9”). Make a small arrow 10px wide inside the circle and choose the color “FFFFFF” (white).
Step 8
Now create a small field to show the cost of our app. Take the Rectangle tool with rounded corners/Rounded Rectangle (U), set the radius to 4px, and create a rectangle with a height of 52px and any width greater than 100px that overlaps the load button.
Change the color of this field to “2B2B2B” and slide in the layers panel under the load button.
Next, assign it a stroke/Stroke layer style with the following settings:
Now we can add cost information. To do this, you need to create two separate text fields, because the content inside them requires different styles. In the first field, add text (I wrote “ONLY”) and apply the following settings:
Font Family: Helvetica Neue
Size: 19 px
Style: Bold
Anti-aliasing: Crisp
Color: #FFFFFF
In the second text box, enter the cost (I wrote “$1.99”) and apply the following settings:
Step 9
As you move to the bottom of the page, you need to create a separator. For it, we will apply the two-line method we used earlier on the download button to give the tab separator the appearance.
Take the Line/Line (U) tool and hold down the SHIFT key to draw a line in 1px from the left guide to the right, then define the line color “000000” (black).
Change the opacity of this line to 80% and duplicate it by selecting Layer/Layer > Duplicate layer/Duplicate Layer… and click OK. Change the color of the duplicated line to “FFFFFF” (white) and opacity to 10%. Then slide it down 1px to get under the black line.

Step 10
Under the separator line we just created, we’re going to add two columns: for screenshots and a list of properties. Start with the screenshots – import the first one by selecting File/File > Place. Take a screenshot of the displayed files and click Place. Resize it to 80% of width and height, then move the screenshot to the left guide and click Enter.

In the panel, select the layer and click the Add mask/Add Mask to add a Vector mask/Vector Mask. Now select the Rectangle tool with rounded corners/Rounded Rectangle (U), set radius of 6px and create on top of the screenshot rectangle size 175x120px.

Finally, we will add the Stroke/Stroke layer style with the following characteristics:

Repeat the above steps for all your screenshots and make a 35px gap between them.

Step 11
To separate screenshots from app properties, draw a 1px line from the top of the first screenshot to the bottom of the last, which is approximately 55px from the screenshots. Set the line color to “FFFFFF” (white) and its opacity to 5%.

Step 12
Let’s add a title describing the properties (I wrote “Leaflet Features”). Place the text in 55px from the left separator line and apply the following settings:

Font Family: Helvetica Neue

Size: 24 px

Style: Regular

Tracking: -10

Anti-aliasing: Crisp

Color: #FFFFFF

Now let’s create a list of properties and place it under the title. Make a text box, add five or six lines of properties, and assign the following settings:

Font Family: Helvetica Neue

Size: 15 px

Style: Regular

Leading: 28 px

Tracking: -10

Anti-aliasing: Sharp

Color: #8d8c90

Repeat the steps above to add the application system requirements.

Step 13
To make the property list stand out, let’s create our own simple markers. Start by moving the property list text box 25px to the right.

Now select the Ellipse tool (U) and create a circle with a diameter of 9px to the left of the first property. Set the circle color to “bce086”.

Assign the following layer style to the circles:

Step 14
Now we need to duplicate their mercery and align them relative to each property. Start by duplicating a layer with a circle: after selecting it, click on Layer/Layer > Duplicate layer/Duplicate Layer…

Next, move the duplicated layer 28px down (the line spacing applied to the property list). Repeat the above steps three times.

Step 15
As we move to the footer area of our page to separate, we will once again apply the two-line method we used earlier in Step 9.

Step 16
You can now add useful links to the footer area. First, you should make four text boxes, one next to the other, where will be our links. Start by creating a field about 160x40px in size. Fill in the text and repeat three times. Here is an example of the text you can use:

Field 1: Follow @mycompany on Twitter for news and updates.

Field 2: For help & support head to our Support area.

Field 3: Download our press and media kit.

Field 4: Copyright 2010 My Company, LLC.

Apply the following settings to the properties:

Font Family: Helvetica Neue

Size: 12 px

Style: Regular

Leading: 20 px

Anti-aliasing: Sharp

Color: #5555552

You may have noticed that the fields are non-parallel and not aligned properly, but don’t worry, we’ll handle it in the next step.

Step 17
To solve the alignment problem, put the four text boxes we created in a folder and name it “Footer”. First place the first field at 55px from the left rail, and the last one should touch the right rail.

Now select the four text layers in the Footer folder and take the Move/Move (V) tool. Click Align vertical centers/Align vertical centers, and then click Align centers horizontally/Distribute horizontal centers from the toolbar Move/Move.

Step 18
You can now highlight links by adding a few custom icons. Select the Ellipse tool (U) and create a 36px circle next to the first text box. Change the color of this circle to “FFFFFF” (white). Now select Layer/Layer > Rasterize>Layer/Layer.

The next step is to add your own icon to this circle. For the first icon I use “t”, denoting Twitter, free downloaded from here. When the download is complete, select / File > Place in Photoshop to import the icon into the document. After importing, set the icon size to 28% of its width and height, place it on top of the circle and press enter.

Next, right-click on the icon of the Twitter Icon in the layers panel and click Select pixels. Now take the circle layer from the panel, then Edit/Edit > Clear/Clear. Remove the imported Twitter icon by selecting it in the layers panel and click or drag it to the Trash icon. Finally, reduce the opacity of the circle layer to 15%.

Step 19

For the rest of the above icons, repeat Step 18, taking other icons or custom photoshop shapes.

Step 20
As a final touch to the footer links, for greater visibility let’s assign them a bright color. Use The Horizontal text/Horizontal Text (T) tool to select a portion of the text in each field and change its color to “83b546”.

Conclusion!
That’s all, finally we have created a layout of our site with a dark design and gloss! I hope you enjoyed this tutorial and found the techniques useful that can be adapted/applied to your future projects.

The main myths about website promotion
Myth 4 | site promotion main myths Maybe the promotion of a site is not expensive Destroy the myth: website promotion is expensive, but if the competition on the subject…

...

Effective web design - what is it?
If you want to achieve serious heights and build a successful career as a web designer, then you definitely need to know the key criteria for evaluating the effectiveness of…

...

Creative website design: what's new?
How does a creative start? Morning, coffee, shower ... A new day has begun, it's time to create. Open a laptop or start a computer, in front of us the…

...

Landing Design: How to make a capture page
What is landing? The concept of the landing page, as, in principle, the design of the landing page, came to us relatively recently, according to the official version from the…

...

Advantages and disadvantages of online store
This article is for those who want to open their online store. In it I will talk about the main pros and cons of this type of business. What is…

...