Beginner's Guide to Web design graphic design: A good designer's workout

As a rookie who wants to be a good graphic designer or web designer, we usually start by learning some tutorials from the Internet. We search for some of the effects we want to learn, such as tutorials on button effects, typography, page layouts, illustrations, and so on. All the way to the end we are hopeless, thinking that we can not be what we see Daniel, and then stop. I want to tell you, do not underestimate yourself, remember to eat bitter bitter, Fang for people

Success without effort is like reaping without sowing! No way!

--rev Run

Keep your curiosity, even if it's something you won't do.

When you search the Web, you see a very well-designed site, you might say, wow! So beautiful! "Then you may ask yourself a few questions:

1. What do they do with these buttons? How are these shadow effects and 3D effects implemented?
2. What color did they use?
3. What is the actual width of the website?

I often do what I don't do, in order to learn how to do it.

--pablo Picasso

Quick Challenge

First of all, I have to confirm that you will Photoshop basic operations. Here's what you need to do: Turn on Photoshop and try to copy the effect of the button (don't start with a tutorial on a similar effect, because you may end up finding only the wrong effect)

Sounds hard, doesn't it? Because you still don't know how to replicate these effects. Think about it, you'll study the mixed options panel and you can experiment with other effects before you get the effect you want. I know this is not a perfect imitation, but it's also good to learn while playing.

Next, you'll wonder what color they're using? Well, it's actually easy. Take a screenshot and throw it into Photoshop, and you'll know by sucking it in the suction tool (I).

There are faster ways to install browser plug-ins:

1. Chrome:eye dropper
2. Firefox:colorzilla

Finally, how to know the width of the site. The most basic method is the same as the color, this time you use the Ruler tool (U) on the line. Browser plugin:

1. Chrome:page Ruler
2. Firefox:measureit

Here is a quiz to test yourself.

Use the blending options to find out how the buttons in the screenshot below are implemented, and note that they are not using strokes.

Tell me your answer in the comments and your opinion of this article.

Doing this allows you to learn on your own and can quickly increase your knowledge and creativity in using Photoshop, which is all very well.

[1] [2] [3] [4] [5] Next page