The formatter threw an exception while trying to deserialize the message: Error in deserializing body of request message for operation 'Translate'. The maximum string content length quota (30720) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 34265.
In this tutorial I will show you how to create a trendy typography piece using only strokes and flat colors. We will be using an Adobe Illustrator alternative called Sketch available as a free trial (or paid) by the good folks at Bohemian Coding. With the announcement that Adobe will be discontinuing Fireworks, this is a very vector capable piece of software with a unique set of features and tools that would make an excellent alternative.
With this tutorial I will try to use as many basic tools and features as possible so you can better acquaint yourself with this (possibly) new software. Once you get used to the program you will probably find there are easier/faster ways to achieve the same functions.
Also, in case you want to follow along in Illustrator or your favorite vector program feel free to do so. These steps can easily be interchanged with tools from other programs so long as you have a basic understanding of the tool names and what they do. I hope you’ve brought your suntan lotion, it’s gonna be a scorcher.
To begin, let’s launch Sketch and set up our artboard. If you have never used this application before, take a minute to get acclimated to your new surroundings. Tools and features are laid out quite differently from Adobe Illustrator and there are no floating panels and windows. Everything is available in and around the main artboard. The main difference you will notice is that the Layers panel is to the left of the artboard while the tools are along the top and adjust features for the various tools are to the right.
Once you’ve got your bearings, begin by clicking on the Artboard icon at the top of the app window. With that option selected, click and drag on the artboard space in the center. of the app to create a shape. You can physically draw out the shape to the correct size or, what I find easiest, is to create a simple square then, using the Inspector panel on the right, type in the exact measurements manually. For this project our artboard will be 1300 x 600 px. Feel free to leave the artboard name as the default or you can double click the artboard name in the Layers panel on the left to adjust it to your liking.
Since our finished piece will be fairly modular let’s make things easier on ourselves and enable the grid so we can work more efficiently. Select the View icon (located next to the Artboard icon at the top of the app window) and select Grid Settings… then enter the settings seen below. Then click the View icon again and ensure that Show Grid is enabled.
We will be using and reusing the same few tools over and over again for this project so let’s make them easily accessible. Right click on the Toolbar or visit View > Customize Toolbar… and let’s add some tools to this area. Our basics are already there, but we’ll be using the Scissors tool quite a bit so let’s drag this to a comfortable location on the toolbar for future reference. If you see any other tools that you feel will help your proficiency feel free to add them now.
Because our final piece is really only 3 colors., and has a flat design let’s go ahead and fill in the background of our artboard. To do so, click the Shape icon at the top, left of the app window and select the Rectangle (R) tool. Click and drag out a shape that encompasses the entire artboard. By default grid snapping is enabled so this should be an easy task. With your rectangle shape created navigate to the Inspector panel locate on the far right of the app remove the border by deselecting the check-box and adjust the fill to a orange-y pink color as outlined below. Once completely, right click on the layer and choose Lock Layer so we don’t accidentally select it later on.
With our document set up and ready to go we’ll now create our custom text for our piece. Let’s zoom in a bit so we can see what we’re doing, then click the Shape icon at the top, left of the app window and select the Rounded (U) tool and create a rounded rectangle that is 40×50 px. Remove the Fill color completely in the Inspector panel to the right and adjust the Border to the Center, the size should be 5px and pick a lighter cream color as outlined below. Be sure to also adjust the Ends and Joins to be rounded (the middle option).
Another feature you may find a bit strange is that once your shape is drawn you are automatically switched to your select tool. There is no need to switch back and forth in order to select a shape or move it. Coming from Illustrator this takes some getting used to as your first instinct it so press the “V” key in order to enable the “Selection” tool but pressing “V” here will enable the Vector tool and throw you off your game. Once you get used to it this becomes a time saver in the long run. So, now that our rounded rectangle is drawn click-drag while holding the Alt key to create a duplicate of this shape and place it directly beneath the first one so the top of the new shape and the bottom of the old one meet.
Now Shift-click both shapes and choose Union from the top of the app window. And with this new shape still selected go to Edit > Paths > Scissors or select it from the toolbar up top since we added it there earlier. Now, if you hover over a segment of the shape it will highlight that path in blue and if you click on that highlight it will cut out that highlighted area. So, for the top shape hover over the bottom right curve and click to remove it. Also, click the shorter straight path directly above that on the right side. We’re making an “S” shape so to the same thing on the opposite side of the bottom shape.
After the shape is complete, navigate to the Inspector panel and adjust the position options as outlines below.
Now that we have the basics let’s duplicate the above process to create the other letters to form our first word “Summer”. Keep in mind we want our lower case letters to be half the height of the capitol “S”.
For the “u” let’s create another rounded rectangle as before then remove the top curve. Be sure to add some space between the two letters. For all of my letters I’ll be using 10px spacing between each, this should give you an unoccupied grid line between each letter. Making the shape 40×50 px you’ll notice that once the top curve is removed that the “u” is no longer half the height. So, while the shape is selected, click the Edit button from the tool menu at the top and click on one of the open points. Then, shift + click on the other open point. You should notice a darker ring around the point marker appear. Now, while holding shift, click and drag one of the open points up to it meets the “S” half way. Now to finish off the “u” I would tell you to use the Line tool but this operates a bit differently from the other shape tools. The snapping for this line tool works based on the width of the border currently enabled so the border will fit snuggly inside the pixel grid making crisp lines. However, since our border isn’t an even number this line tool won’t help in this case. What we’ll need to do is select the Rectangle (R) tool and create a square on the right most edge of our “u” shape then remove the 3 edge paths we don’t need. you can now group the line and “u” shape together by going to Arrange > Group Layers menu.
Continue this process until you have finished the other letters in the word. I found it easiest, once the “u” was completed to just copy those objects and duplicate them then rotate them to make the 2 “m’s”. If you have the “u” selected Click-drag while holding the Alt key to duplicate and move at the same time. Now, if you hold down the Command key and place your cursor over one of the corners of the bounding box it will switch to the rotate tool and you can rotate it 180º, or you can use the Rotate in the Inspector panel to type it in manually. Once rotated though, you will need to realign the shape with the grid as it will be slightly off center. Now select the looped shaped and Click-drag while holding the Alt key to duplicate it and finish your “m” shape. Now duplicate the whole “m” shape and we can move on.
The “e” requires a little extra work. Create another rounded rectangle that is 40 x 50 px. Now enable the Scissors tool and remove the right most straight edge.
Switch to the Edit tool and if you hover your cursor over the bottom right curve the tool will have a “+” if you’ve directly over the path. Click where the path intersects with the grid 3 squares down to add a point. Now switch back to the Scissors tool and remove the upper part of that path.
Enable the Rectangle (R) tool and create a rectangle that is 40 x 10 px. Then with the Scissors tool remove the top and left side of the rectangle to complete our “e”.
To create the “r”, simply duplicate the “m” shape and remove the extra looped shape that makes it an “m” instead of an “n”. Now with the Scissors tool remove the far right path.
Once you have all the letters for “Summer” completed we’ll start the word “Lovin’” using the same techniques with a few extras we’ve not seen yet.
To begin, select the Rectangle (R) tool and create a rectangle that is 40 x 100 px. Now select the Edit tool and click on the lower left anchor point. With that selected a new set of options should appear below the toolbar. Select the last option available in that list and round that corner to 20px. Now with the Scissors tool click to remove the top and right most paths to form our capitol “L”.
The letter “o” is fairly self explanatory so I’ll skip that. Just be sure it is the same size as your other shapes (40 x 50 px). Let’s move on to the “v”. This one is fairly easy as well. Select the Triangle tool from the list of shape options and create a triangle that is 40 x 50 px then rotate it 180º. Now with the Scissors tool remove the top most path.
To create the “i” select the Rectangle (R) tool and create a rectangle that is 50px high, the width doesn’t matter, just make sure the left most side is lined up correct with the previous letter. Now with the Scissors tool remove the top, right, and bottom paths. Repeat this process the point over the “i”, making it 10px high.
For the “n” you can simply copy one of the “m’s” from our previous word and remove one of the extra looped shapes. Now finally create the apostrophe, by duplicate the steps for dot on the “i”, only this time make it 15px high.
Lastly, make sure the work is positioned correctly. Highlight all the letters and Group them together. Then, with the group still selected navigate to the Inspector panel and adjust the position as outlined below.
Pick a new spot on the artboard and let’s begin creating our final sentence. This text is much smaller than our previous text so we’ll be using a smaller Border. When creating this text keep in mind that your Border should be set to 4px, the rounded Ends and Joins will stay the same, so will the color
Select the Rectangle (R) tool and create a rectangle that is 15 x 30 px then remove the top and bottom path using the Scissors tool. Create another rectangle so that one of the ends of the rectangle intersects the exact middle of our “H” shape, then remove the ends that are not needed. Now Group them together.
To create the “a” begin by selecting the Oval (O) tool and creating an exact circle that is 15 x 15 px. Now switch to the Rectangle (R) tool and create a rectangle to the far right of the circle and remove the unnecessary ends. The width doesn’t matter, but it should be the same 15px height as the circle shape. You can now Group them together.
For our two “p’s” let’s duplicate the “a” shape by Click-dragging while holding the Alt key. Now rotate it 180º and make sure it’s lined up with our grid. Inside the group folder select the straight path and click on the bottom most point and drag it down until it is 30px long. Now select the group folder and duplicate it and put it into its proper place.
To create the “e” create another perfect circle that is 15 x 15 px and select the Edit tool. Position the cursor so it is about a quarter of the way between the right and bottom points then click to create a new point. Switch to the Scissors tool and click to remove the top quarter of the new point we just created. Now create a rectangle as we’ve done previously and remove the sides that are not needed and Group the shapes together. Be careful to like up the rectangle path with the open path so there is a nice enough gap to make the “e” shape.
Since we’ve already created an “n” I won’t explain how to do that again. Just make sure that if you are copying your previous shape that you shrink it to the proper size and that the border is set to 4px. Since we also have an “e” created we can also just copy that over and place it into the correct position. To finish of this word copy one of the “p’s” then rotate it 180º and put it into position.
To create our “S” we’ll follow the same rules as we did before, only we’ll use two 15 x 15 px perfect circles instead of the rounded rectangle. When creating this new letter keep in mind that it is the start of a new word so it should be farther apart than the individual letters. I’ll put start this new letter 30px away from the “d” in the last word (5 unoccupied gridlines between words).
The “o” in “So” is fairly obvious so I’ll skip that and move on the “F”. We’ll make this letter similar to how we made the “H” only we’ll remove the right and bottom paths. Then we’ll make a rectangle in the middle of the shape but only make it 10px wide instead of 15.
Since we’ve already made an “a” we’ll just copy that and place it into the correct position. Pay attention to proper kerning here. I have left 10px between the shorter bottom-middle line in the “F” rather than the top line like all the other letters. Let’s move on to the “s”. Create another perfect circle then remove the bottom right and top left paths with the Scissors tool. Now switch to the Edit tool and click on the bottom most point to select it then while holding shift position your cursor over the top most point and click to make a path. Select the oval layer from the panel to the left and then rotate the shape 45º to create the “s”.
Let’s create the “t”. With the Rectangle tool make a rectangle that is 25px high then remove the unnecessary sides. Create another rectangle that is 10px wide and align it with the top of the lowercase letters then remove the unnecessary sides.
Finally, Group the words together and Position the group as outlined below.
And with that our text is done. Let’s move on to the embellishments.
We’ll start by creating our tree trunk. To begin we’ll use the Vector (V) tool to draw a curved shape. I’ve tried to make it as easy as possible so all the handles of the points will click into one of the grid corners. Please use the image below as a guide when creating your own. When we have the shape created use the Scissors tool remove the upper and lower most curved paths. We’ll now change the Border color to a deeper tanned red color with a size of 5px, then adjust the placement of the shape as seen below.
Let’s add some separations to the trunk. With the Vector tool enabled create 6 curved separations climbing up the trunk shape about 20px apart. You’ll notice as you duplicate and position these segments that Sketch will automatically display guides to show you how far about the items are from one another. It’s okay to let these separations overlap some as it gives it a bit of character.
Moving on we’ll create some coconuts. Enable the Oval (O) and create 3 perfect circles that are 20×20 px. We’ll stroke it with the same deeper tanned red color at 5px but we’ll re-enable the Fill and fill it with the creamy color from our text.
Now we’ll work on the palm fronds. Select the Oval (O) and create an oval that is 115 x 50 px Keep the dark tan color and fill the shape with our background color This will help us when we layer the shapes later on. Now select the Rectangle (R) tool and create a rectangle that covers the bottom half of the oval. Navigate to the Layer panel and select both the Oval and the Rectangle layers then in the top Tool bar select the Subtract tool.
With the Vector (V) tool create 3 triangle shapes that will act as notches cut from the frond. You may need to zoom in to get a nicer edge. Once all 3 triangle shapes are created visit the Layer panel again and select all 3 triangles and the half oval shape then in the top Tool bar select the Subtract tool. If you’re not happy with the notches that were cut by your shapes you can click the arrow icon next to layer name to adjust them manually. Sketch has nondestructive ‘combine’ options which is pretty snazzy. When you’re happy with the placement of the notches return to the top Tool bar and choose Flatten to set the subtractions permanently.
Let’s drag this frond into place, then we’ll need to duplicate this shape, rotate, and flip it a few time until we have 5 in total. Feel free to lay them out as you wish, just keep in mind that you don’t want to obscure the text and we will need to work around them later with other elements. I create two on the left and duplicate one and rotate it 45º and shrink the width to 105px then duplicate them both and flip them horizontally and line them up so their tips are touch each other from the opposite side. Then the top one I rotate at -45º and shrink the width to 93px.
To finish it off we’ll add a border at the very bottom of the trunk to cut it off neatly. Create a rectangle that is 90px wide then remove the unneeded paths with the Scissors tool.
To create our parasol we’ll need to select the Oval (O) tool and make a perfect circle that is 110 x 110 px. Now select the Rectangle (R) tool and create a rectangle that covers the bottom half of the oval. Navigate to the Layer panel and select both the Oval and the Rectangle layers then in the top Tool bar select the Subtract tool then choose Flatten to set the subtractions permanently.
Now enable the Triangle tool and create a triangle that is 90 x 55 px and center. it inside the half circle. Navigate to the Layers panel and rearrange the order of the half circle and the triangle so the half circle is on top.
Select the Rectangle (R) tool and create a rectangle that is at least 120px high and center. one edge in the half circle. Now using the Scissors tool, click to remove the unnecessary paths. Then rearrange the layer order again so this straight line is on the bottom.
Finally Group the parasol shapes together and rotate it -45º and position it as outlined below.
These birds are easy as pie. All we need to do is create a circle, duplicate it then remove the bottom halves, rotate them and duplicate. To begin, select the Oval (O) tool and make a perfect circle that is 50 x 50 px. Enable the Scissors tool and remove the bottom two paths so you’re left with a half circle. Now Click-drag while holding the Alt key to create a duplicate of this shape and place it right next to the other so the paths touch.
You can now duplicate these shapes and rotate them and vary the size of each. Our goal is to have 3 of these birds so let’s do that now. You can use my size, rotation, and positions outlined below.
Let’s create our board shape. Select the Vector (V) tool and create the shape seen below. I’ve highlighted the points and handles for you so you can follow along. When first clicking and dragging your handles will be identical but once you have the shape created you can adjust the handle lengths individually by select the Edit tool and click on a point then select the handle you want to edit and drag it separately.
Duplicate this large board shape and shrink it down to 15 x 30 px and center. it in the big board shape and at the bottom. We’ll also remove the Border and set the fill to the border color
Select the Vector (V) tool and create the zig-zag shape seen below. Set the Ends and Joins to be square and the width to 40px and change it to our cream color
With the zigzag shape created rotate it 45º. Now navigate to the layers panel and right click on it then choose Use as Mask. This unfortunately doesn’t include the border width so we’ll have to duplicate the board shape and place it on top of the zigzag shape in the layers panel.
To finish up, create a rectangle that is 100px wide and remove the paths that you don’t need. When you’ve got that done group all the shapes together and position it as seen in the screenshot below.
Let’s make some cool aviator type shades. Select the Oval (O) tool and create a perfect circle that is 70 x 70 px. Now switch to the Edit tool and select the right most point and drag it over 10px, then up 10px as well. If you have the point selecting you can hold Shift then press the right arrow then the up arrow on the keyboard to make this precise. With this point still selected, hold Alt then drag the bottom handle down 10px as well. Now select the bottom most point and move it over 5px, you can use the arrow keys for this as well.
Exit edit mode and with the shape selected Duplicate it and visit Edit > Transform > Flip Horizontal then place it 20px away from the other lens shape.
Let’s add some highlights doodads to the lenses. Select the Rectangle (R) tool and create a rectangle that is 20px wide and tall enough to fit across the lens. Then create another one that is 8px wide and place it 5px to the left of the wider piece. We’ll fill this with our cream color as well.
Group the highlights together then rotate them -45º and line it up inside the lens shape in a position that suits your fancy. Once you have a position you like Click-drag while holding the Alt to duplicate the highlight and place it over the other lens as well.
Navigate to the layers panel and rearrange the highlights layers so they are over the corresponding lens shape layers. Now Right click on the lens layer and choose Use as Mask. Unfortunately this affects all layers above it so we will need to right click on the other lens shape layer and choose Ignore Underlying Mask. You’ll notice the dots that appear next to the layer name will disappear indicating the mask is no longer affecting it. Now Right click on the other lens layer and choose Use as Mask.
Duplicate the two lens shapes and place them above the others so the border is above the highlights. Then remove the border from the bottom lens shape and instead fill it with the solid darker tanned color
To finish it off let’s create our nose piece. Enable the Oval (O) tool and create an oval that is 30 x 25 px and center. it between the two lens shapes. Then add a border of 8px with out darker tanned color Now switch to the Scissors tool and remove the bottom two paths that are not needed.
Finally, duplicate this nose piece and drop the border width to 4px. Nudge this thinner nose piece down a 10px. You can now group together all of the elements that make up the shades and adjust the positioning as seen in the screenshot below.
To begin our ice-cream bar, enable the Rounded (U) rectangle tool and create a rectangle that is 85 x 60 px. Enable the Edit tool then click the points on the far left to highlight them then reduce the radius to 0px from the top bar.
To create the stick, repeat the above process only this time our rectangle will be 45 x 20 px and we’ll flatten the right edge where the stick meets the ice-cream. We’ll also fill the shape with our cream color Then, using the Vector (V) tool, click to create some swirls in the stick to represent wood grain.
Let’s add some dripping action to the ice-cream bar now. To do this we’ll use the Rounded (U) rectangle tool and create some pill shapes and some circles then remove the unneeded paths.
Our first circle will be 10 x 10 px. The pill shape next to it will be 15 x 35 px. Duplicate the 10 x 10 px circle and move it over to the right then nudge it down. Finally create a pill shape that is 15 x 20 px.
Now enable the Scissors tool and remove the unneeded paths. Then enable Edit and adjust the points of the different shapes so that their ends meet.
Group all of the ice-cream bar elements together then position it as seen in the screenshot below.
To create our sailboat, enable the Oval (O) tool and create an oval that is 80 x 40 px. Now select the Rectangle (R) tool and create a rectangle that covers the top half of the oval. Navigate to the Layer panel and select both the Oval and the Rectangle layers then in the top Tool bar select the Subtract tool, then Flatten.
Duplicate this half circle shape and line it up with the other then fill it with the deeper tanned color and remove the border.
With the Rectangle (R) tool, create a cream filled rectangle and rotate it -45º and position it over the back 3rd of the boat shape. Now select the boat shape layer that is filled completely from the layers panel and right click on it then choose Use as Mask. Then drag the boat shape layer that is only the border and place it above the other boat elements.
Now let’s create the sails. Choose the Triangle tool and create a triangle that is 25 x 35 px. Now enable the Edit tool and click the top most point and drag it to the right to make a “right angle” triangle.
Duplicate the above process only this time make the triangle 45 x 65 px and make the straight angle on the opposite side so the straight lines line up.
Group all of the boat elements together then position it as seen in the screenshot below.
Now we’ll make the water our sailboat is sitting in. Select the Oval tool and create a perfect circle that is 40 x 40 px and position it as outlined below.
Duplicate this circle 15 more times and place them end to end from left to right. Navigate to the Layers panel and select all of these circles at once then choose Union from the top Tool bar.
Finally, enable the Scissors tool and remove the paths that are overlapping our other objects. Some whole circles may need to be removed completely.
No beach scene would be complete without the sun so let’s make that now. Enable the Oval tool and create a perfect circle that is 160 x 160 px
Now create two more circles centered inside this large red circle, these will be our cream color One will be 140 x 140 px with a dashed border of 14. The second will be 120 x 120 px with a dash of 13 and the gap set to 12.
Grab the Rectangle (R) tool and create a square that take up the bottom left quarter of the circle. Select Edit and select the bottom right point and while holding Shift on the keyboard press the right arrow 8 times to nudge it over 80px. Now duplicate this shape twice so you should have 3 of the same shape sitting one on top of the other.
Now click one of the angles box shapes and one of the circles then choose Subtract. Then with the Scissors tool remove the two straight paths that are not needed. Do this for all 3 circles.
We’ll now create the suns rays. To begin create a rectangle that is 50px high and line up one of the edges with the center. of the sun circle. Then remove the unneeded edges with the Scissors tool.
With that line selected navigate to Edit > Paths > Rotate Copies and change the number to 7. This will make a star-burst pattern with a handle in the middle. Click and drag that handle down until it is in the middle of the sun circles.
Repeat the above steps to create smaller rays. These rays will be 30px high. Once you’ve created the star-burst pattern rotate the smaller group of rays 22.5º.
Now navigate to the Layers panel and click the arrow next to the layers with the sun rays in it and remove the paths that intersect with the text.
We’re on the home stretch. Our main elements are done and all that’s left is to fill up the empty space. For this I’m going to create some linear cloud shapes using the Rounded (U) rectangle tool then remove the unnecessary parts with the Scissors tool. If you remember how we made the drips for our ice-cream bar earlier on this is the same process only we’re working horizontally instead of vertically. Feel free to put as many or as little a you like. I just wanted to fill up the empty space as much as I could. I even added the background fill color to a few of them and layered it over the elements like on the surfboard just to add a little something extra.
Lastly I added some embellishments to the “Happened So Fast” text at the bottom. I felt it was somewhat empty down there and wanted to try and evoke a sense of “speed” with the angled lines.
The tutorial may be over, but summer has only just begun! I hope I was able to show you a new vector tool to consider for the future. Feel free play around with Sketch a bit more and get acclimated. There are some great CSS export features included for you web design aficionados that I highly recommend you check out. Whether you followed along with Sketch, or decided to stick with your vector editor of choice I hope you enjoyed it.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন