Example Walkthrough
To demonstrate how to use some of Outquote's features, I'm going to walk you through how to make the example image below.
Open up Outquote. We're going to start with the text and then move on to styling.
Copy and paste the following text into the "Quote Text" box:
Welcome to our quote tool! This can be used for posts on various social media platforms. It has style guide-compliant options like standard fonts and colors as well as gradients, sunrays, and a list of great Sunrise photos to use in the background.
In the "Quote Attribution" box, write "Sunrise NYC". You can leave the "Attribution Subtext" box empty.
There are three categories of options: Formatting, Style, and Elements. Generally speaking, Formatting is for sizing and layout. Style is for colors and backgrounds. Elements is for including or excluding specific parts of the graphic.
We're going to use all of the options in Formatting. Use the first dropdown to select "Twitter/Facebook". This will give us a graphic that is wider than it is tall.
Check the three boxes below the dropdown (the second and third will be checked by default). The first centers the text. The second ensures the attribution title text is below the "Sunrise NYC" text. The last one means the logo will be in the top right corner of the graphic, offsetting the border, rather than in the center.
In the first dropdown, select "Yellow/Purple Gradient". This will change the background to a gradient that goes from purple to red to orange to yellow. It will also change the font color to grey.
Check the "Include sunrays" box. This will add semi-transparent orange sunrays over the gradient but behind the text, border, and logo.
To get rid of the default attribution title text (the line that says "Title"), uncheck the "Include attribution title" box. This will move the "Sunrise NYC" text to the bottom of the graphic, right above the border. If you want more spacing between the text and the border (as I've done in the example), type a single space in the "Attribution Subtext" box and re-check the "Include attribution title" box.
Congrats! You've made a graphic. To export it, just click the "Save" button at the bottom of the page. This will save the image to your default downloads folder as quote.png.