The handling of details is very important in web design. I personally often observe Gringo's websites and find that excellent website designs are very thoughtful in handling details. The tips I share with you today are very simple, but they can greatly enhance the details of the entire website. So I think these tips are also helpful to improve your website design level.
And you will notice that these techniques all revolve around one word, which is "pixelation", which simply means some small lines of 1px and 2px. Okay, here we go.
1. Pixel divider line The first introduction is the divider line. Please look at the navigation bar in the figure below.
Pay attention to the lines in the red circle in the picture and the separation lines between the buttons. These lines look recessed, forming a good separation line feeling. Next, I will enlarge this picture and let’s take a look at the principle.
We can see that these dividing lines are composed of two adjacent 1px straight lines, and one color is darker and the other is lighter than the background color. Next, look at the method:
Select the pencil tool (don’t choose the brush by mistake) and set the size to 1px
Select a color darker than the background color, such as dark blue in the picture, hold down Shift and draw a straight line
Pick a lighter color and draw another straight line. OK
PS. During the line drawing process, you can enlarge the canvas (Z) for observation.
How about it? The effect is much better than a single color divider, right? Let’s look at some more examples of using this divider technique:
2. Pixel edge
First, let’s look at an original image without “pixel edges”:
Next is what is added:
