Background tutorial, teach you step by step how to make a very stylish grid background – background wallpaper

I never thought I would post tutorials on a cool website. I always thought it was something that a master would do very well. Later, after reading a lot of tutorials, I found that the ones who wrote the tutorials were all masters (because there are many people

They say they always miss a certain step when writing tutorials, and then we rookies ponder it for a long time, just kidding, haha), the design industry requires too many people to come forward and share, the Internet

This is especially true for the Internet industry.

The first time I write a tutorial, I write it for myself, and also for those design enthusiasts who are still in the early stages.

In design, there are many people who can produce high-quality effects, and there are also many people who spend a long time thinking about even the most basic details, such as me, hehe…

Today’s article is about how to create the most basic grid background in PS, and how to make it beautiful.

Dear classmates and masters, please ignore my article

Let’s first take a look at a picture I collected from the Internet. I suddenly felt that this grid background is very beautiful. It looks like a very simple grid, but it is actually very simple to make. It must be meticulous and precise

Beauty requires careful thinking.

Some students will draw a straight line, and then shift+alt to copy it horizontally and vertically…

(Is this method too tiring?)

Today I will share with newbie “designers” a method called “defining patterns”,

Many people know this method, but they inevitably overlook the details when doing it.

Without further ado, let’s get started…

1. ctrl+n to create a new canvas and set it according to the following picture (please ignore that I am an obsessive-compulsive disorder)

2. Fill the canvas with any color. Since you and I are serious, I will use the eyedropper tool to select the same background color as the picture.

3. What to do next? After the canvas is built, of course we need to draw the grid. How to draw it… This is where the tutorial begins. We use the method of defining patterns to complete the grid drawing. So, continue to create a new canvas document (50*50), as shown below.

4. Fill our new canvas with black, then zoom in to 500% for easy reference. Select the straight line tool and draw a straight line with a width of 50 pixels and a height of 1 pixel in the horizontal direction.

As shown below. Hold down shift+alt with your left hand and drag the mouse with your right hand to copy the remaining straight lines. The drag intervals are 10 pixels.

5. The same principle applies in the vertical direction, as shown in the figure below

6. Next, we reduce the transparency of the straight lines on the four sides of the grid to 76 (the value is determined by yourself, I said I am an obsessive-compulsive disorder), and the transparency of the straight lines inside the grid is uniformly reduced to 21. Start defining the pattern, and edit – Define the pattern, give the pattern a random name that you can recognize, and then click the OK button.

7. Next, go back to the first newly created canvas and start drawing the grid with our custom pattern. Yes, it is time to witness the miracle. Select the paint bucket tool,

Select the pattern in the paint bucket submenu in the upper left corner, and click the inverted triangle symbol next to it. Find the pattern you just defined in the drop-down menu. It will usually be the last one.

8, then��Create a new layer above the background layer to fill the grid pattern. Just click on the newly created layer with the selected paint bucket pattern. You will find that the grid is filled, as shown in the picture below.

9. Let’s take a look at this picture we made and the previous picture.

10. Through comparison, we can see why other people’s grids are so beautiful, but our grids don’t seem to be very good-looking. Why are our grid lines so thick, while other people’s grids are so detailed? They are both in units of 1 pixel, so why do they look different? Is it possible to select 0.5 pixels in PS? Or smaller pixels?

Some students will say that just adjust the transparency of the newly created grid background. You can try it. Even if you adjust the transparency, the effect is still not ideal. Even if you zoom in and out, it still doesn’t look as good as others.

I think there must be something wrong somewhere. In order to solve this problem, let’s continue to analyze…

11. Let’s zoom in and take a look at our grid background to see why it is so thick. Who made it so thick? Who allowed it to be so thick? Let’s zoom in to 3200% and we can see how big the one-pixel grid is under the guide lines. In this step, call up the guide line (shortcut key ctrl+r) and set the guide line unit to pixels.

12. By zooming in on the grid background, we finally discovered the trick. It turned out that some straight lines occupied 2 pixels, and some straight lines occupied 1 pixel, which resulted in the final effect being so rough and crazy, which did not suit us at all. The aesthetics are different. When defining the pattern, we clearly draw a one-pixel straight line, even in both vertical and horizontal directions.

Why does a 2-pixel straight line appear when the paint bucket is painted? We might as well go back to the definition pattern PSD document to see what’s going on.

13. Did you get any thoughts from looking at the picture above? Where did the 2 pixels come from? Where is the promised one pixel? After analysis, I came to the conclusion that the problem lies here, as shown in the red mark in the figure below. Let’s see what happens when we remove these two straight lines and redefine the pattern.

14. After removing these two straight lines, the entire grid pattern is an unclosed pattern. At this time, we use the same method to redefine the pattern and give the pattern a name for easy identification. Then go back to the previous canvas and use the paint bucket tool to paint again and see what the effect is.

15. By redefining the pattern again and painting with the paint bucket again, we get the effect shown below. (Remember to reduce the overall transparency of the grid layer to about 30%). By the way, compare the previous pictures to see if the effect has been improved.

16. After redefining the pattern, we found that the problem lies there, right? The reason is because the closed grid pattern automatically merges the same grid when painting with the paint bucket tool, resulting in edge overlapping. , that is to say, a 1-pixel straight line becomes a 2-pixel straight line after superposition. In order to solve this problem, we remove the edge straight lines when defining the grid pattern, so that the pattern does not need to overlap the edges when painting with a paint bucket. .

�The distinction between the primary grid and the secondary grid depends on the distinction between the transparency of the edge straight lines and the straight lines inside the grid when you define the pattern.

17. Design is so fun sometimes. A single pixel will bring a different overall effect. Especially in the UI design industry, too many details are required. I hope this article can bring a different perspective to new friends in the design industry. This article is also dedicated to myself. I hope you guys like it, and I hope the editor will put it on the homepage for me. Is there any high-definition five-code tutorial…

I also hope that all the experts will share some of the knowledge you have learned. Let’s communicate more.

This is the first tutorial to be written. Please give me feedback, exchanges, friends, recommendations, and sharing.

Besides, you won’t get pregnant if you click on it…

I never thought I would post tutorials on a cool website. I always thought it was something that a master would do very well. Later, after reading a lot of tutorials, I found that the ones who wrote the tutorials were all masters (because there are many people

They say they always miss a certain step when writing tutorials, and then we rookies ponder it for a long time, just kidding, haha), the design industry requires too many people to come forward and share, the Internet

This is especially true for the Internet industry.

The first time I write a tutorial, I write it for myself, and also for those design enthusiasts who are still in the early stages.

In design, there are many people who can produce high-quality effects, and there are also many people who spend a long time thinking about even the most basic details, such as me, hehe…

Today’s article is about how to create the most basic grid background in PS, and how to make it beautiful.

Dear classmates and masters, please ignore my article

Let’s first take a look at a picture I collected from the Internet. I suddenly felt that this grid background is very beautiful. It looks like a very simple grid, but it is actually very simple to make. It must be meticulous and precise

Beauty requires careful thinking.

Some students will draw a straight line, and then shift+alt to copy it horizontally and vertically…

(Is this method too tiring?)

Today I will share with newbie “designers” a method called “defining patterns”,

Many people know this method, but they inevitably overlook the details when doing it.

Without further ado, let’s get started…

1. ctrl+n to create a new canvas and set it according to the following picture (please ignore that I am an obsessive-compulsive disorder)

2. Fill the canvas with any color. Since you and I are serious, I will use the eyedropper tool to select the same background color as the picture.

3. What to do next? After the canvas is built, of course we need to draw the grid. How to draw it… This is where the tutorial begins. We use the method of defining patterns to complete the grid drawing. So, continue to create a new canvas document (50*50), as shown below.

4. Fill our new canvas with black, then zoom in to 500% for easy reference. Select the straight line tool and draw a straight line with a width of 50 pixels and a height of 1 pixel in the horizontal direction.

As shown below. Hold down shift+alt with your left hand and drag the mouse with your right hand to copy the remaining straight lines. The drag intervals are 10 pixels.

5. The same principle applies in the vertical direction, as shown in the figure below

6. Next, we reduce the transparency of the straight lines on the four sides of the grid to 76 (the value is determined by yourself, I said I am an obsessive-compulsive disorder), and the transparency of the straight lines inside the grid is uniformly reduced to 21. Start defining the pattern, and edit – Define the pattern, give the pattern a random name that you can recognize, and then click the OK button.

7. Next, go back to the first newly created canvas and start drawing the grid with our custom pattern. Yes, it is time to witness the miracle. Select the paint bucket tool,

Select the pattern in the paint bucket submenu in the upper left corner, and click the inverted triangle symbol next to it. Find the pattern you just defined in the drop-down menu. It will usually be the last one.

8. Then create a new layer on top of the background layer to fill the grid pattern. Just click on the newly created layer with the selected paint bucket pattern. You will find that the grid is filled, as shown in the figure below. Show.

9. Let’s take a look at this picture we made and the previous picture.

10. Through comparison, we can see why other people’s grids are so beautiful, but our grids don’t seem to be very good-looking. Why are our grid lines so thick, while other people’s grids are so detailed? They are both in units of 1 pixel, so why do they look different? Is it possible to select 0.5 pixels in PS? Or smaller pixels?

Some students will say that just adjust the transparency of the newly created grid background. You can try it. Even if you adjust the transparency, the effect is still not ideal. Even if you zoom in and out, it still doesn’t look as good as others.

I think there must be something wrong somewhere. In order to solve this problem, let’s continue to analyze…

11. Let’s zoom in and take a look at our grid background to see why it is so thick. Who made it so thick? Who allowed it to be so thick? Let’s zoom in to 3200% and we can see how big the one-pixel grid is under the guide lines. In this step, call up the guide line (shortcut key ctrl+r) and set the guide line unit to pixels.

12. By zooming in on the grid background, we finally discovered the trick. It turned out that some straight lines occupied 2 pixels, and some straight lines occupied 1 pixel, which resulted in the final effect being so rough and crazy, which did not suit us at all. The aesthetics are different. When defining the pattern, we clearly draw a one-pixel straight line, even in both vertical and horizontal directions.

Why does a 2-pixel straight line appear when the paint bucket is painted? We might as well go back to the definition pattern PSD document to see what’s going on.

13. Did you get any thoughts from looking at the picture above? Where did the 2 pixels come from? Where is the promised one pixel? After analysis, I came to the conclusion that the problem lies here, as shown in the red mark in the figure below. Let’s see what happens when we remove these two straight lines and redefine the pattern.

14. After removing these two straight lines, the entire grid pattern is an unclosed pattern. At this time, we use the same method to redefine the pattern and give the pattern a name for easy identification. Then go back to the previous canvas and use the paint bucket tool to paint again and see what the effect is.

15. By redefining the pattern again and painting with the paint bucket again, we get the effect shown below. (Remember to reduce the overall transparency of the grid layer to about 30%). By the way, compare the previous pictures to see if the effect has been improved.

16. After redefining the pattern, we found that the problem lies there, right? The reason is because the closed grid pattern automatically merges the same grid when painting with the paint bucket tool, resulting in edge overlapping. , that is to say, a 1-pixel straight line becomes a 2-pixel straight line after superposition. In order to solve this problem, we remove the edge straight lines when defining the grid pattern, so that the pattern does not need to overlap the edges when painting with a paint bucket. .

As for the distinction between the primary grid and the secondary grid, it depends on the distinction between the transparency of the edge lines and the internal lines of the grid when you define the pattern.

17. Design is so fun sometimes. A single pixel will bring a different overall effect. Especially in the UI design industry, too many details are required. I hope this article can bring a different perspective to new friends in the design industry. This article is also dedicated to myself. I hope you guys like it, and I hope the editor will put it on the homepage for me. Is there any high-definition five-code tutorial…

I also hope that all the experts will share some of the knowledge you have learned. Let’s communicate more.

This is the first tutorial to be written. Please give me feedback, exchanges, friends, recommendations, and sharing.

Besides, you won’t get pregnant if you click on it…