Easy Way to Create PDF with Transparent Background

Affinity Designer is a fresh new design and illustration app that burst on to the scene last year and immediately won Editors’ Choice, before becoming a runner up in the contest for Best App of Yesterday, Serif announced some top new features in Affinity Designer 1.

Here, I’ll walk you through how to create a unique logo using the software. I’ll cover the basics of the app, including working with lines and shapes, laying out a page, and exporting various elements as efficient web graphics. Affinity Designer is Mac-only for now, but that may change once the developers finish up the suite of tools which will also include Affinity Photo and Affinity Publisher.

Before you get started, download the day Affinity Designer trial and install it or dive in and buy it from the Mac App Store. Affinity Designer works on OS X Launch the app and create a new doc from the startup panel. As we’re designing a scalable vector logo, the document type and pixel size aren’t critical — we’ve chosen ‘Web’ at WXGA x for ease. To prepare for the design, turn on Snapping and select the UI design preset from the drop-down list, which also enables Force Pixel Alignment mode.

You should also enable Guides and Rulers from the View menu. Select the Pen tool from the left, and choose the ‘Line Mode’ option on the top Context toolbar to restrict creation to straight lines. On the Stroke panel at the right, set the stroke weight to 9. Click and hold, starting from above and left of centre of the design area, holding Shift to constrain the line to vertical, and drag downwards. Release to draw the stroke ours is px tall. Set the Cap type to ‘Butt’ to give a flat end.

Switch to the Move tool V , hold cmd, then click and drag your line to create a copy, moving it to the right. Hold Shift to keep the copy aligned. It’s evident now that some layout guides will help keep the growing number of elements neat.

Position the right line over the guide at px — it should snap nicely into place. Select the Pen tool again and draw a diagonal line from the top-left of the logo to just above the middle of the logo space. Switch to the Move tool V again, hold cmd and drag to duplicate this as we did for the vertical line.

Flip it using the ‘Flip Horizontal’ button on the top toolbar. Position it to the right. You can edit these strokes by moving end nodes using the Node tool A. This converts them to rectangular shapes that are easier to select and align. Zoom in to the point of the ‘M’ and use the Node tool again to position the lowest corners together on the centre line. Time to embellish the ‘M’! Click on the Triangle shape on the left toolbar to select it more options become available if you hold down , then click and drag to draw a triangle px wide by px tall.

Fill it black via the Colour panel and remove the stroke. Position at the bottom-left of the ‘M’, then duplicate it for the right. Duplicate the triangle again, then use the Transform panel at the lower right to set its size to 70px wide by 60px high.

Position one triangle at the left middle of the first stroke, duplicate and flip to position another on the right stroke. Now we’re going to create the ‘C’ that will sit inside our ‘M’. Create an ellipse xpx, with no fill and a 40px stroke.

Next, create a rectangle 60px high and position it over the mid-right of the ellipse this will form the break in the ‘C’.

Shift-click to select both objects and cut the rectangle from the ellipse using the ‘Subtract’ button. I’ve also added a small triangle on the letter’s left side.

If you’re feeling up to some curve manipulation, we can add some interest to the middle point of our ‘M’. Add a small circle with 40px stroke and convert to curves. Break the curve at the top node and move the loose ends to make a teardrop shape that meets the ‘M”s arms. Some practice with curves can be had at bezier. You can also add a neat 5px rounding inside the top of the ‘M”s upper points using the Corner tool — select both the nodes, then click and drag to smooth.

Now we want to save your file again and export the logo as an SVG so we can easily use it in other projects. Choose ‘Selection without background’ from the Export dropdown, then click ‘Export’. Now you just need to give your logo a name, choose a folder remember where it is! Close your design from the File menu.

Over the next few steps, we’re going to use the techniques you’ve already learned to mock up a page around your logo. Create a new design, same size or larger than before ours is x px and we’ve unchecked ‘Transparent background’. Once open, ensure Snapping is enabled, choosing the UI preset again. Ours is roughly px square, but it’ll look perfect at any size! Choose whether to start with guidelines or content first and guidelines afterwards , to kickstart your layout.

Our guides define a repeating area that includes a background rectangle, one large and three small images, product information, and button regions. You can drag these guides on to the page from the rulers. Time for some layout tips! Add text using the tool at the left, either scalable ‘Art Text’ or traditional ‘Frame Text’.

Once you’re happy with your page mockup, it’s time to select some elements to export. Now switch to the Export persona using the button in the top-left. In the Layers panel, click ‘Create Slices’. You can adjust slices to be any size in any position. In the Slices panel, uncheck everything apart from your selected images. Choose whether to export at 1x size, 2x, 3x or all three. Look up to the settings in ‘Export Options’.

Now click ‘Export Selected’ at the bottom of the Slices panel, pick a folder, and click Export. That’s it! You’ve seen some creation tools, pixel-perfect shape manipulation, layout assistants, exporting as SVG, creating export areas from design elements, and exporting optimised graphics.

There are plenty of ways to make Affinity Designer fit your unique workflow — start using it in your own way to see what fits! This article was originally published in issue of net magazine. Please deactivate your ad blocker in order to see our subscription offer. Dale Cook. Topics Logos.

One moment, please – Related Articles

 
Jan 08,  · For someone who was used to the “Save for Web & Devices ” workflow to save transparent PNGs on Photoshop, switching to Affinity Designer had me all confused on how to save PNGs with transparency. On the export dialogue or the export persona on Affinity Designer, I was not able to figure out how to save with transparency. In my search for answers, here are two methods that . Sep 24,  · Exporting the corrupt PDF as a new PDF from Affinity still yields a corrupt PDF; Exporting the corrupt PDF as a PNG from Affinity corrects the issue (but now it is PNG not PDF) I can create an Affinity file with a transparent background and export to PDF . Jun 09,  · To export a PNG with a transparent background in Affinity Designer, select the object you’d like to export and navigate to File > Export. In the Export Menu, choose PNG as the file type and choose Selection Only from the Area dropdown menu. The following video tutorial will walk you through the process of exporting a single PNG graphic with.