![]() ![]() gif does, but looks sharper and more crisp with complex patterns, colors and color gradations.Ĭhoosing your file type all depends on your desired end result. png file, which supports transparency just as the. Often, the best choice is to save the file as a. gif file will also give you a small file size, and it’s a viable option when you aren’t creating complex patterns with different colors. You might see rough edges or slight pixelation. gif, you gain the ability to have a transparent background, but if your pattern is complex, you may experience a loss in image quality. jpg file will have a very small file size, which makes for quick page loads. Otherwise, you will end up with white as your pattern’s background. This won’t allow you to have transparency, so you will have to choose the desired background color and apply it behind the pattern before you save the image file. You could save it as a flat, low-resolution. Step 11: Choose the File Format That Works For Youĭepending on what your preferences are, you can save in three different file formats. jpg file to form your pattern, make sure to add your desired color to the background. If you are making a transparent pattern, make sure to delete the background layer, or click the eye icon to hide the background layer. Step 9: Selecting the Right Background For Your Pattern If you chose instead to draw the shape yourself with the pen tool, then you will have to color it by using the paths panel and clicking the icon at the bottom called “Fill path with Foreground color.” If you chose the shape tool, you can click the slider icon on the shape layer and change your graphic’s color easily. The idea here is to create a symmetrical design with even spacing on all four borders. I chose the five diamonds that form a cross.Ĭlick and drag your shape onto your canvas, making sure to release it in the exact center. This menu should have a default list of shapes, but if you used one in a previous project, it may show up in the pop-up box among the default choices.Ĭlick the fly-out menu and choose ornaments. I chose the custom shape tool, and I clicked the custom shape icon with the drop-down arrow. I chose the custom shape tool, where you can select from regular shapes such as rectangles, ellipses, or polygons, or you can use custom shapes from the option in the top toolbar. You can create your own shapes using the marquee tool, the pen tool, or the custom shape tool. ![]() Step 4: Choose the Tool to Make Your Pattern The intersection of the two guides should identify your center point. Step 3: Use Guides to Help Make Things EvenĬlick and drag from both the vertical and horizontal rulers to the center to apply guides to your document. Showing your rulers will enable you to apply guides in the next step. Hit command or ctrl + “R” to show your rulers if they are not already visible. You can design the pattern using a variety of shapes, but make sure that the image itself is a square. The square shape of the canvas is extremely important, because we are going to rely on symmetry in order to create seamless vertical and horizontal repetition with a single image. In an effort to keep our file size small, I created a 20px by 20px square canvas. Open Photoshop and create a new document. The best background patterns strike a careful balance between being small enough (in terms of file size) to load quickly and large enough (in terms of dimensions) to repeat endlessly across the layout without any seams of glitches. There are several different files formats that you can use, but they all end up having fairly similar file sizes. You’ll want your background image file to be fairly small so that it loads quickly. You can find many different background patterns on the web, but you can also create your own using Photoshop.įile size is a critical consideration when creating a custom background image. With increased browser support, more and more designers are integrating tiled textures and repeating patterns into their layouts. Patterned backgrounds have become very popular in modern web design. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |