

Once you have all your windows positioned as in the image above, select both them and the sky scraper and group them so that if you move it by accident its elements won’t get separated.

With all of the windows selected, press Ctrl + G to group them, and then five copies which we will position towards the bottom at about 10px from one another. Once you have all five of them, select them, and then after clicking on the first element on the left to define it as the Key Object, use the Vertical Align Center and Horizontal Distribute Space as follows: We now have our first window element, which we will duplicate four times so that we will end up with 5 objects which we will Vertically Align at about 14px from one another using the Align panel.įirst create the duplicates by either selecting and then holding down Alt while dragging to the left (four times) or by using the copy (Ctrl + C) paste (Ctrl + F) method. Grab the Rectangle Tool (M) and create a 10 x 10px square (#FCDEDE), and position it as follows: To finish up our first sky scraper, we need to add some windows to it. You can either group the antenna or unite it, depending on whether you want to leave it or not, so it’s all up to you. Next, we want to add the top antenna, by creating a 4 x 48px rectangle, and positioning it using these coordinates: With both of the created objects selected, use Pathfinder ’s Unite function to combine them into one shape. We will type in 0 in the first field and 24 in the Vertical one.Īs you can see our left corner is now positioned slightly lower, which is exactly where we want it.Ĭreate another 90 x 92px rectangle, position it (X: 147px, Y: 338px ) and then using the same trick with the Move tool, lower its top right anchor point by about 38px. Try Startup App Try Slides App Other ProductsĪ quick pop up box should appear asking you to input values for either the Horizontal or Vertical position. With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes. To do so, grab the Direct Selection Tool (A) select it, and then go to Object > Transform > Move. Once you have the shape positioned, we need to adjust its left top anchor point, by nudging it down a couple of pixels. The first thing we will actually construct will be the background holding the sky scrapers.įirst make sure you’re on the proper layer (sky scrapers) and using the Rectangle Tool (M) create a pinkish (#FFEBEB) 132 x 194px shape, which we will position towards the left of our Artboard using the following coordinates in the Transform panel: Now that we have everything set, we will start building our way up through each layer, locking all the ones that are not used and focusing mainly on the one at hand. Quick tip: if you’re wondering why some of the positions of the layers are inversed from a logical numeric stand point, you shouldn’t worry, as we have some elements that go over some of the houses which force us to position those layers on top. To do so, go to the Layers panel and set them up using the following names:

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
