How to create a big picture on the site?

I think you've collected a lot of beautiful pictures, so what are you going to do with them next? Hidden in the hard disk slowly forgotten, or PO to the social network to bask in life? Maybe it's a good choice to make them a big picture site.

So it's going to be your job to wrap your photography and design artwork in HTML and CSS code, but before you do, you need to do a more important task: build a reasonable layout for these images and content, and design a good page.

Whether your site is a personal blog or an Enterprise Portal, this kind of image display site has a lot in common with design skills. Master the following 10 kinds of processing methods, so that the site in the force of the explosion table, stand out.

　　1, the use of large graphics background HD

Set the background into a very character or a large image full of impact, is to make the user a bright important design means.

When choosing a background image, it is not enough to simply be large. This picture is best to have rich details, with depth and level of the people, stunning. A picture wins thousand words, a good picture can let the user open the website at that moment to understand more words can not describe details, whether it is about the site itself, as a designer of you, or the site belongs to the brand.

　　2, multiple graphics scrolling can cause more interest to visitors

More than one picture scrolling must be able to show more content, can accommodate more different proportions, size of the picture content, but this is not all its advantages.

Similar to the choice of background big picture, in the selection of scrolling pictures, not the more the better, but to maximize the least impact. Try to ensure the correlation between pictures, but not repeat. You can present more content here, different sides of the site, but try to make them unified, focused and serve the site itself.

3, create a picture collage or display grid

A beautiful set of photos makes the site look more dramatic and more fun. But you need to be a little more careful in choosing photos, cropping sizes, and grouping issues. Ajax scrolling is really interesting, through the photo grouping show and the user has more interaction.

There are also a few issues to be aware of when creating picture tiles and grids. Choose the size and proportions of the picture display, so that they can be seen in the content, not too large or too small, at the same time size and size as much as possible consistent point. For the Avatar and ordinary pictures, such a presentation is fine, but the details of the landscape map is not suitable for this display.

　4, the use of simple style

Image display is the core of your website, too much modification will actually divert the user's attention from the picture. The use of minimalist style allows users to focus more on the image content.

Simple button, intuitive control, reasonable color can make the screen space looks larger, more suitable for display content.

　　5, away from the complex redundant effects

In fact, many designers have completely said goodbye to the complex effects, but this should be a little more to remind. Especially this kind of picture Display class website, Gao Guang what still has how far to roll how far good.

High-resolution pictures to load as fast as possible, after all, is a large file. So keep in mind that when you design animations, load effects, and other effects, be sure that the picture loads are unaffected, and if it does, don't use these techniques or effects. As much as possible to simplify the effects and dynamic, parallax scrolling is not bad, at least the picture has no direct impact.

　　6. Design a Theme

Some Web site designers will design a fun and fun theme for the site, which is not only more convenient to display pictures, but also appropriate to dazzle the technology. Some of them will reference Instagram style to design, and will draw on the Pinterest waterfall flow style, neutral black-and-white color theme can highlight the picture, and graffiti borders and color overlay can make the page rich personality. In a word, it is useful to design a theme for your website for a long time.

Of course, as with the previous one, the effect can be used properly, but do not steal, or affect the details of the photo itself.

　　7, mix different size and shape of the picture

Different from the tile and grid display way, different size, direction, shape of the picture neatly together, can produce very good visual effects.

Think about it, different size and content of the picture coordination scattered together, these differences produced by the uneven beauty, coordination of tone and background, this large pile of pictures can make the viewer visual fatigue, users will stay longer in the site.

8, graphic mixed row

Even with first-class picture content, if the text and language is too poor, it will make the site appear monotonous. Inserting text reasonably and decorating buttons and other controls outside the picture can make the site more complete and plump.

The obvious design trend in recent years is the use of large high-definition background and Phantom buttons, which is typical. Pictures as the main text as a supplement, the button will not affect the overall effect of the picture.

　　9, the control of contrast

The control of contrast is very important to the overall design of the website, which is beyond doubt. The contrast between picture, text, and background is especially noteworthy.

Black and white gray such neutral tone background is very suitable for use in photo display and photography site, because they can and a variety of pictures to form a clear contrast, user-friendly browsing. and the appropriate distance between the pictures and space, can give the site a good browsing experience.

No matter how the website chooses the design style and the esthetic orientation, as a picture display main site, guarantees the background and the picture contrast, lets the visitor be enough to distinguish the picture information to be the background content, this is extremely necessary.

　　10, for the picture design

For the site of the main picture display, the real meaning of the combination of the actual situation of the picture to design is the most important. The picture is the core! If you design a layout, and then fill in the picture, many times there will be a variety of dog blood things. You see a pair of 39 yards of shoes is very beautiful, can buy back to realize that your feet to wear 41 yards, willful, awkward.

Take a closer look at your own picture and then design the appropriate page layout framework. Deal with the content correctly and you will find that the process can save you a lot of trouble.

Conclusion

Of all the cool sites we recommend, quite a few of them are websites for pictures and product display classes. The quality of the picture and elegant layout so that users linger, a reasonable layout structure for content rendering provides a solid foundation. Boy, if you itched, just come to the speed!