Posts Tagged ‘Patterns’
Everything You Ever Want to Know About Creating Seamless Patterns in Illustrator
|
Adobe Illustrator patterns makes your work process easier and the result prettier. Every vector professional must know the secrets and details about using seamless patterns, as well as many approaches to creating them. In this tutorial I dive into the anatomy of patterns in Adobe Illustrator, analyzing numerous existing methods of creating a seamless pattern fill, from the easiest ones to the most complex ones.
Vector PlusWant access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month. Tutorial Details
IntroductionI believe that most readers know and use patterns in Illustrator, but I also know that there are some users that are only now making their first steps in Theory: Understanding the BasicsI think it’s a good idea to start with the theoretical part first. This way those of you who are only starting to work in Illustrator will learn the basics 1. What is a Pattern?In Adobe Illustrator Patterns are one of the powerful tools used to decorate your artwork. It may be applied in the form of Pattern fill – one of three ![]() 2. Pattern AnatomyIn a nutshell, patterns are a group of vector objects with rectangular-shaped borders (tile). The source tile is saved as a pattern. To form the seamless pattern texture, the saved source is automatically tiled horizontally and vertically. The tile direction is guided by rulers in the Illustrator document – usually patterns start from the lower-left corner. Interestingly, when the pattern is applied to a vector object as a fill or stroke, the result is a pixel-based image. However, as the source tile is vector, it is still scaleable, so you don’t need to worry about the quality. ![]() 3. Finding PatternsWe will soon be creating our own patterns, but first I want to make sure you try the existing ones. Adobe Illustrator has a plenty of default It is possible to load other pattern libraries, for example, downloaded from open-source internet sites. To do it, go to Window > Swatch library > Other library and navigate to the saved file on your hard disk (it might have a .ai extension). Usually, when you apply a swatch from an additional library it appears in the main Swatches panel. You may also want your main Swatches panel to show only pattern swatches – for this, choose Show Patterns in the panel View Options icon. ![]() 4. Studying PatternsI recommend you to study the default patterns from inside Illustrator. To do it, simply drag the one you like onto your artboard. It is extremely useful for ![]() 5. Pattern FillPattern fills works in a simple way – it is applied as a fill to selected objects. You can apply multiple fills to any object, combining all types of fills (color, gradient, and pattern) using the Appearance panel (Shift + F6). You can also assign a blending mode and change the pattern fill opacity in the Transparency panel (Shift + Command + F10). You can transform the pattern fill in any way – moving, scaling, rotating, reflecting it, etc, along with the object itself or separately. To do it, select any transform tool you want, for example Rotate (R), click Enter, and check what exactly you want to transform – either patterns only, or object only, or both. ![]() 6. Pattern StrokeA pattern stroke is one of two types of strokes in Adobe Illustrator. Just like a pattern fill, you can combine pattern strokes with color strokes in the As for transformation, again you may rotate, move, or scale a pattern applied to a stroke separately or together with the object. If you want all strokes to transform proportionally with the object, simply check Transform Strokes and Effects in the flyout menu of the Transform panel. ![]() 7. Pattern BrushAnother pattern embodiment is the pattern brush. There are many default pattern brushes, you can find them in Window > Brush Libraries > Border_Brushes and choose the library. Brushes can be applied as a stroke effect to any path, or you can use the Brush tool (B) to draw directly with chosen type. Still you can create your own pattern brush using any pattern in the main Swatches panel – simply click the New icon in the Brushes panel (F5), select Vectortuts+ has plenty of custom pattern brush tutorials, like href="http://vector.tutsplus.com/tutorials/designing/how-to-create-a-climbing-rope-pattern-brush/">How to Create a Climbing Rope Pattern Brush, or Create a Gold Chain Pattern ![]() Important! Saving PatternsWell, we’ve found out what patterns are and how to apply them. Still, the most important thing about Illustrator’s seamless patterns is that we can 1. Defining a PatternTo define a pattern in Adobe Illustrator, you should first create the source tile for it that will be then repeated horizontally and vertically to form a seamless texture. Anyway, you will need to create the objects to form your pattern and then save it. To save an object or group of objects as a pattern swatch, simply drag it to the Swatches panel. It is a good habit to name patterns appropriately, to do it double-click the swatch and rename it. Another option for saving a pattern is to select objects and go to Edit > Define pattern, this way you can name it right away. ![]() 2. RestrictionsActually, it’s possible to create patterns with all kinds of objects, including symbols, gradients, brushes, blends, and mesh. However, you must ![]() 3. Cropping a TileBefore we learn the process of seamless pattern creation, I think we must remember techniques of cropping the tile. As the objects we create mostly do not form a perfect rectangle or square, there are ways of defining exact pattern borders to avoid incorrect results. There are three main cropping pattern tile methods: 1. Background Rectangle – In this method, the rectangle is placed below all other objects, so that all elements stay within its borders. ![]() 2. Dividing Objects – To crop the pattern, create a rectangle on top of all objects to match the tile. Now you have two options: either select all objects and press the Crop button in the Pathfinder panel, or select the top rectangle and go to Object > Path > Divide objects below and delete the leftovers. Now you can save the perfectly cropped pattern. ![]() 3. Invisible Borders – This method is the most advanced and popular. Create a rectangle matching the tile borders, make it NO fill and NO stroke (dark rectangle on the image below) and send it to back of the entire stack (Shift + Command+ [). This invisible shape will define the pattern borders, this way you can avoid dividing objects. ![]() 4. Transparency and BlendingIf you use blending modes or opacity for objects in your tile, the future pattern will inherit them, and the object with such pattern applied will Still, if you want to correct it, I suggest that you either use a solid-colored background included in the pattern itself, or turn all objects to flat-color or 100% opaque ones. To do it, select your tile objects and go to Object > Flatten Transparency and adjust settings. You may want to check Preserve alpha transparency, converting objects with blending modes to flat-color but preserve their opacity level, or check Preserve Overprints (works for 100% opaque shapes) to keep blending modes intact, converting elements to 100% opaque. This way yo may choose how to handle transparency to convert objects to flat-color or 100% opaque (or both) shapes. ![]() As an example, I will use this option when creating patterns later in this tutorial. You can use whatever objects you like, but I want you to try one nice technique - I'll show it in case you want to recreate it. For the patterns created below I took multiple objects made with the help of the Tilde key (~) and the Snap to Grid (Shift + Command + ') option. To make them, grab any shape tool, from the Rectangle to Star to Spiral, and start drawing an object pressing the Tilde key. This way we get multiple copies, and we can scale and rotate them while drawing. To make the result more pleasant, adjust your grid size by going to Preferences > Guides and Grid (Command + K), turn the Grid on (Command + ') and Snap to Grid (Shift + Command + ') on. Then select the objects created, reduce their opacity, change the color, and change the blending mode to your liking. You can also try pressing other modifier keys when drawing along with Tilde, like Alt to draw from the center, or Shift to constrain the proportions (or both, if you have enough fingers) to get interesting results. Also, try the Spacebar to move shapes while drawing. You can then combine the resulted shapes in various abstract figures, duplicating and transforming them to your liking. ![]() Practice: Creating Seamless PatternsThere are numerous methods for creating seamless patterns, from the easiest to the most complex ones. The first and foremost rule for correct pattern creation is to make it seamlessness. This means a tile should be constructed in such a way, that elements on its right border perfectly match ones on its left border, and top and bottom borders match as well. This way, when a pattern is tiled horizontally and vertically it looks seamless. Below I use simple forms just for demonstrative purpose, you can apply these methods to create more complex patterns. I will explain all pattern techniques I know in the practical guide below, starting from the primitive one and moving to complex techniques involving precise calculations. 1. The Easiest Method.It's obvious that any object or group of objects can be technically saved as a pattern, although it won't necessarily work well seamlessly. Still, we'll start from this primitive (and the least popular) way to create a pattern - drawing any object and dragging it to the Swatches panel. If the object has a rectangular shape, the pattern will be correct, as the pattern tile border will match the rectangle border. If, however, the object isn't rectangular, the tile borders will be assigned according to the object bounding box. This way, if we simply save a star or circle as a pattern, the tile will still be rectangular with empty space added automatically. Of course, this is not what we usually want, but sometimes this method may produce interesting results. ![]() 2. Within the BackgroundAs it follows from the previous step, patterns should be saved with rectangle borders to look correct. One good and simple way of doing it is creating The program takes the borders of the entire group as a tile, in this case they will match the background rectangle. To make sure the tile is formed correctly and the pattern will be seamless, position all the inner objects within the background. This method is used in the tutorial A Beginners Guide to Digital Textile Printing, demonstrating what nice results may be produced. Save the entire group as a pattern and see the outcome. ![]() Note: if you need no color background for your pattern, you still can position objects to your liking and crop the tile with the Invisible borders 3. ReflectionAnother method worth mentioning that produces very nice-looking results is mirroring. The idea of it is creating a symmetric pattern. Symmetry To create it, draw a rectangle background tile and put the main objects onto it. Here I used simple shapes to create a digital sound wave just to illustrate the idea. Try to position objects so that they overlap one vertical tile border (in the image below it's the right border). Move and transform elements to get the result you like, then copy the background rectangle (Command + C) and paste it in front (Command + F), then bring it to front (Shift + Command + ]). Select everything and crop all objects by pressing the Crop button in the Pathfinder panel (Shift + Command+ F9) – and you’ll have one-half of the future pattern. To create a second half, select all elements and choose the Reflect tool (O), now Alt-click on the tile’s right border and enter a Vertical axis, and click Copy. Both parts will perfectly match now (you may want to reflect the pattern again by the horizontal axis). ![]() 4. From the EndThe methods above are quiet straightforward, and they are not enough at all for making more complex seamless textures. Sometimes you need to start from the end, creating not the only one tile, but rather the entire pattern of many tiles, and find the initial tile later. |
Design a Colorful Illustration Using Patterns and Shapes
|
A good friend and amazing artist Bram Vanhaeren and I decided to collaborate on an illustration to then create a tutorial for all the readers at Psdtuts+. We came up with a cool illustration that incorporates patterns, coloring, as well as 3D shapes. The most important thing about this is that it is all extremely simple to create so it shouldn’t be that difficult for anybody. There are a lot of new techniques here that I guarantee you’ll be using, so check this one out!
Final Image PreviewTake a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below. ![]() IntroductionThis tutorial is simple to follow and will give you some great techniques and results. We’ll be using simple techniques to create elaborate 3D shapes to decorate our image with. There will also be some simple coloring techniques as well as some patterns used. To start yourself off you will need to find 2 essential stock photographs to use in this illustration. The first thing you will need to find is a good background, for these types of illustrations a paper texture, or a concrete one should work well. You want something simple that will not overpower what you will have going on over it. We were given permission from Bashcorpo to use one of his amazing stocks located here on the DeviantArt page. So feel free to look through the portfolio and grab one of the many amazing background textures. The final step in preparation is to get the main stock images you will be using. Bram and I both chose this stock from SXC. The reason we chose this stock is because you have enough of the body visible in the picture, the face Step 1Now let’s open up Photoshop, we always work with an A3 300 dpi size because you never know if a magazine wants high-res files and of course you want to print your own work out, and for all of that 300 dpi is perfect. Now before you start with the artwork you should make some groups to put your layers in. Group 1 will be named “Background,” Group 2 will be the “Model” and you can add groups like “Color” as you go along. I also use groups called “PLAY,” here where I play with patterns and add little details to make it look better. Below you can see how the groups look before even starting the illustration. ![]() Step 2After you make the groups you should always start with the background first, because it is hard work with a plain white background. I use paper textures a lot, you can find a stock like this by searching on SXC or DeviantArt. If your paper texture was not originally white like ours, then you can go ahead and desaturate it or use hue/saturation and then saturate it to about -80, so there is still this slight orange tint on it. Experiment with it as much as you can until you find something that is suitable for you, Command + U will bring up the Hue/Saturation screen, and Command + Shift + U will just desaturate the whole layer. After that you can also brighten the background a little bit by playing with the Lightness bar on Hue/Saturation. After that I added the stock we picked onto the background and used the Pen Tool to cut away the background. If you are using a model with a lot of hair, then do not worry, just avoid cutting it out for now and I will show you how to solve that problem later. As you can see it was too tedious to cut out our model’s hair as well so we left it alone for now. So far the piece is looking like the image below. ![]() Step 3Now I adjust the colors of my model because she is looking a bit too dark. First I try to make her brighter by using brightness/contrast – Brightness +18 in my case. Every stock is different so you have to feel it out yourself and decide when you think it’s bright enough. The next technique that we use a lot is again adjusting her with Hue/Saturation and Saturate by -20. Why, because your background is also saturated. Another good thing to do is to add little ![]() Step 4Now we will address the issue with the hair. There are two different methods to dealing with this problem and both of them are a lot more Method 1 is for the users who have the pleasure of using a tablet, if you do then first download these amazing brushes created by the extraordinary painter Daniel Luvisi. In this pack you will find a hair brush, the settings are already in place so all you have to do is make a new layer above your model and call it “Hair.” After that zoom in a fair amount and get to the point of the stock where you have the background still left. From there get the Eye Dropper tool and take samples of the color the hair is in that area. Once you have done that just keep stroking away with the great hair brush. You should get into an easy rhythm of Eye Dropper then Brush Tool, after a while and a few layers you should have some very realistic hair. Be creative, also use different colors and try to mimic the original hair color. If you have any of the original background sticking out you can just erase it. Method 2 is very similar but for those users who do not have a tablet to use. This will take a bit longer though. First off make a new layer entitled “Hair” over the model and grab the Eye Dropper tool. Take a sample of the hair’s main color and then grab your Pen tool. Find a 3px hard brush and select it then with the Pen tool map out some simple strands of hair all around. After that right-click over it and select Stroke, with Pen Pressure selected. Repeat the process with a few different colors and brush sizes and you should be good. Now it’s starts getting colorful. Our hair is brushed and we can finally start playing around with colors and patterns. First you take your basic soft round brush tool, now you choose some fresh and vibrant colors like Pink, Blue and yellow, all your choice. Then brush around the model, remember to experiment. I always try to add the brushing over focal points like the neck of the girl, arms, around the eye a little bit and her hips of course. Use as many layers as you want with your brushes and add them to the Group “Front Color” group. The image below is how the work looks like on a black background, just so you can see the type of brushes used as well as colors. ![]() Step 5Now we will change the blend options for the color layers to Screen or Lighten, this part you have to check out yourself to see what looks the best in your opinion. Now we have a little color in our artwork, so far it is looking good. You can also see how the hair looks after it was painted, still very realistic and there was no need to spend a lot of time cutting it out. ![]() Step 6Now we will be adding one more stock to give some texture to the illustration as well as to color up her gray top. First we search for a golden object that is large enough where we can cut out a part of it to fill up a decent portion of her gray top. We found this photograph taken of a golden belt. Now take the Lasso Tool and put the feather setting on, this is very important. Now take a random selection with it that would fit over her top. We will position this part on the top-right corner of her shirt. ![]() Step 7Now we place it in the top-right corner of her shirt and select the whole selection again, then add a new layer and brush with some soft brushes like last time. You can set them to either Screen or Lighten, whichever looks best to you. Below is what we had after this step was completed. ![]() Step 8Now we will begin making some abstract 3D shapes using the Polygonal Tool with the Feather setting on again. You should start a new group called Take a random selection with your Polygonal Tool and fill it with a funky color. In this case Pink was used. This whole illustration is going to be vibrant and happy so pick colors that represent that. ![]() Step 9Now we want to add shadows so it becomes a 3D abstract object. You are going to want to make triangular and rectangular selections with your Polygonal Tool. Make sure they follow the same edges as your original shape. After you have a selection down, slightly use the Soft Round Brush with the colors Black and White to cast shadows and highlights on your shape. You can even lower the Opacity of your brush so the shadows and highlights are softer. Here is where you can be original, look at what we have and use that as a basis to make your own wacky 3D shapes, play around with where the shadows go and highlights so your object gets that 3D look to it. This will take your illustration to a whole other level by taking bland 2D shapes and making them pop more and come to life. All it takes is a few ![]() ![]() Step 10After adding all the shadows and highlights this is what we have as a final product, first try to replicate what we got and once you have gotten the hang of it try to create your own versions of them. ![]() Step 11Now take your 3D shape and duplicate it once. After you have done that just hide that one for now. Go back to your original and if needed press Command + T to either rotate it or enlarge/minimize its size. Once you have it in place go back to that hidden layer and unhide it. Now change its color by using Color Balance, or by just messing with the Hue in Hue/Saturation. After you have a second shape just resize it and rotate it. If it needs to be rotated, then place it somewhere behind the model. Duplicate the duplicated 3D layer that you just changed the color of. Now proceed to distort it, so go to Distort-Twirl, and here you have to play with the settings. You can go with an angle of -50 to -250 or 50 to 250. So once you have decided on what you want proceed to Twirl it, and then set it somewhere on the canvas. Below is what we have so far at this point. ![]() Step 12Ok we’re on the right track now. We have made our first abstract 3D object, now let’s make a second one. This one will be slightly more complicated then our last because we will be placing it over the model so we want everyone to see all the detail in it. This one will be a bit longer in shape and it will flow according to her body and go around her belly. Below I drew out a simple shape just to show the flow of the object, note this isn’t the the shape we will be using. This is just something to show you how it will flow throughout her body. Whatever your stock looks like try to make a shape that has the same type of flow to it, going over the body and then tucking back under it. ![]() Step 13Now if you do not remember how to make the 3D objects scroll back up and read the instructions again from Step 9 and Step 10. The whole process is very easy. You just have to practice a lot. It also doesn’t hurt to be creative and think outside the norm. With all that you will master the technique in no time. Below is the shape we created, it flows almost as we want it to. In the next step we will make an adjustment to fix one of the edges. ![]() Step 14Now our current shape is a bit rough looking with all the sharp edges, so to fix that and make it more rounded we will use the Twirl technique again. So first thing to do is select a part of the shape with the Elliptical Marquee Tool and use a feather of 20, then while you have the selection go to Distort > Twirl set an angle of -150. Depending on your desired flow you can mess around with the settings. Just don’t let it get too out of control. ![]() Step 15Do it again for the opposite side of our object with an angle of 40. Now we should have an 3D object that looks like the image below. ![]() Step 16Now we can perfectly put it around our model. If it is too long or too short go ahead and use Transform, to fix it. To add to the realism of it, go ahead and use a soft brush with the color black to go over the edges to cast shadows from the models body. This is what we have so far. ![]() Step 17To fill in a little bit more space go ahead and experiment with some more 3D shapes. Here we made a small red colored 3D shape and put it over the model. You don’t want all your shapes to have the same basic format so try to change it up. As you can see below this one is layered. Even though its different, the exact same simple techniques were used. ![]() Step 18Make an octagonal selection by using the Polygon Tool and then by choosing 8 sides. Make it a medium sized shape and then just leave it there. The color does not matter at this point. Also hide it as well for now. ![]() Step 19Now make a new layer over the hidden octagon shape, then do Image > Apply Image. Once you have done that right-click on that layer and click Create Clipping Mask. Unhide the Octagon and then go back to the Applied Image. Use the Move tool to move it around until you get a nice piece of clothing fully inside the octagon shape. After that merge the two layers by pressing Command + E. Once you have done that you can use the Lasso tool to select pieces of the octagon and darken them as well as lighten them with Hue/Saturation. |








































A Myriad of Vintage Grunge Patterns From Across the Web
Patterns can be used in almost any style of graphic and web design. They have many purposes, from being used as backgrounds to being used to touch up vector files that look just a little too clean. For that reason we have rounded-up and compiled a huge collection of over 450 free and premium patterns from various different websites for you to use in your personal and commercial projects.
Free Patterns
Grungy Green Tileable Photoshop Patterns (10)
Grungy Natural Beige Photoshop Patterns (6)
Grungy Natural Beige Photoshop Patterns (6)
Grungy Hearts and Flowers Patterns (8)
Seamless Grungy Burgundy Patterns (9)
Extreme Grunge Seamless Photoshop Patterns (7)
Grungy Fiery Red Seamless Patterns (7)
Seamless Grungy Burgundy Patterns (9)
Grungy Mint Green Tileable Photoshop Patterns (9)
Grungy Stripes Photoshop Patterns (6)
Ornate Grungy Golden Tileable Patterns (10)
Grungy Natural Beige Photoshop Patterns (6)
Extreme Grunge Seamless Peeling Patterns (5)
Grungy Natural Beige Photoshop Patterns (6)
Vivid Red Tileable Patterns (8)
Grungy Tileable Vintage Patterns (9)
Grungy Teal Tileable Patterns (6)
Grungy Tileable Vintage Patterns (12)
Ornate Royal Green Grungy Patterns (7)
Vintage Pea Green Photoshop Patterns (6)
Grungy Retro Wavy Photoshop Patterns (7)
Grungy Faded Blue Fabric Patterns (3)
Grungy Vintage Dots Patterns (8)
Grungy Circles Photoshop Patterns (8)
Vibrant Colorful Grunge Textures (3)
Grungy Polkadot Patterns (7)
Orange Violoet Grungy Photoshop Patterns (6)
Grungy Abstract Bokeh Textures (3)
Grungy Forest Green Photoshop Patterns (7)
Grungy Watercolor Textures and Layered PSD (6)
Grungy Summer Photoshop Patterns and Textures (6)
Grungy Fractal Tree Photoshop Patterns (8)
Grungy Gold Seamless Textures (4)
Seamless Grungy Green Textures (3)
Retro Grunge Wallpaper Patterns (8)
Retro Grunge Wallpaper Patterns (10)
Grungy Wallpaper Photoshop Patterns and Texture Pack (7)
Retro Grunge Wallpaper Patterns (9)
Grungy Flowers Photoshop Patterns and Seamless Textures (10)
Grungy Stars Patterns and Seamless Textures (8)
High-Res Grunge Stripes Photoshop Patterns (12)
Metal Plates (8)
Dark Red Tapestry (8)
Brown Flowers (8)
Grunge Stripes (8)
Grey, Brown Grunge (8)
Backgrounds (5)
Vintage Backgrounds (15)
Vintage Backgrounds 2 (15)
Vintage Patterns (15)
Vintage Sage Patterns (4)
Retro Patterns (6)
Damask Series – The Red Severity (10)
Vintage Kimono Patterns (17)
Grunge Lights Pattern (1)
Ornamental Grunge Patterns (8)
Grunge Skull Patterns (2)
Grunge Patterns (9)
ector Grunge Patterns (25)
Seamless and Grungy Amber Textures (9)
Tileable Grunge Textures (9)
Premium Patterns
Seamless Classicism Wallpaper (1 Pattern – 4.00 USD)
Victorian Wallpaper (1 Pattern – From 1.00 GBP)
Old Paper Background (1 Pattern – From 1.00 GBP)
Seamless Wallpaper (1 Pattern – 3.00 USD)
Seamless Elegant Wallpaper (1 Pattern – From 1.00 GBP)
Seamless Wallpaper (1 Pattern – 3.00 USD)
Vintage Grunge Blue Floral Pattern (1 Pattern – From 1.00 GBP)
Turquoise Wallpaper (1 Pattern – From 1.00 GBP)
Cork Board (1 Pattern – 4.00 USD)
Blossom Seamless Pattern (1 Pattern – From 1.00 GBP)
Concrete Seamless Pattern (1 Pattern – From 1.00 GBP)
Seamless Floral Pattern
(1 Pattern – From 1.00 GBP)Seamless Texture Background (1 Pattern – From 1.00 GBP)
Continue Reading…