Guides

[center] [size=5][b]absinthy's guide to... Creating a Simple Custom Image[/b][/size][/center] ----- This guide is more of a tutorial that will walk you through the steps of how to create customized images, also known as graphics, using a 100% FREE browser-based (no download required) art program called [b]Pixlr Editor[/b]. For the sake of this tutorial, I have chosen to create a signature banner. However, the steps are exactly the same no matter what type of graphic that you are creating. ----- [size=5][b]STEP 1:[/b] Go to Pixlr Editor: [url=https://pixlr.com/editor/]https://pixlr.com/editor/[/url][/size] You [b]will[/b] need Adobe Flash to be enabled in your browser in order to use this program. If you do not have Adobe Flash, you will need to install it from [url=https://get.adobe.com/flashplayer/]here[/url]. Make sure you uncheck the checkboxes above the install button if you do not want the optional offers to be included in the download. Once it has downloaded, find the downloaded file on your computer (usually in your Downloads folder) and click on it to open the installer. When installation is complete, you should be able to use the Pixlr Editor. ----- [size=5][b]STEP 2:[/b] Click on "CREATE A NEW IMAGE"[/size] After you click this, a small box will pop up that wants some information from you. [img]https://i.imgur.com/PJJL5vA.png[/img] You can name your image now if you wish, but it is not necessary. Ignore the "Presets" dropdown. The height and width boxes are important. This is where you will set the dimensions of your image. The default is 800 x 600 pixels, which is too big for most use on Flight Rising. Adjust the size to your need based on your need, staying under the maximum sizes listed below. - Maximum image width for use in the FR [b]forums[/b] is 525 pixels. Any larger than this size and the image will be automatically resized, resulting in a blurry image. As far as I am aware, there is no maximum height for forum images. - Maximum image dimensions for use in a FR [b]signature[/b] is 525 x 100 pixels. Any larger than this size and the image will be cut off. - Maximum image width for use in a [b]dragon's bio[/b] is 640 pixels. Any larger than this and you will need to scroll horizontally in order to view the entire image. - Maximum image width for use in a [b]clan profile[/b] is 400 pixels. Any larger than this and you will need to scroll horizontally in order to view the entire image. Since I am making a signature, I have set my dimensions to 525 x 100 pixels. I am making an image with a solid background, so I do not need the "Transparent" checkbox to be checked. Click "OK" to create your blank image. ----- [size=5][b]STEP 3:[/b] Maximize your image window and familiarize yourself with the tool panel.[/size] [img]https://i.imgur.com/VPfMRNu.png[/img] [b]Red Arrow:[/b] Click this to maximize your image window. [b]Pink Arrow:[/b] This is the move tool. It allows you to move text, paint layers, pasted images, etc. around your image. [b]Yellow Arrow:[/b] This is the fill bucket tool. It allows you to fill in a layer with color. Mostly used for filling in a background. [b]Blue Arrow:[/b] This is where you will create text to go on your image. [b]Green Arrow:[/b] This is where you can change the color of the paint or fill bucket. Text has its own color setting on the window that pops up when you use the text tool. Feel free to explore the other tools, but we will not be needing them for this tutorial. ------ [size=5][b]STEP 4:[/b] Add a background with the fill tool and some text with the text tool.[/size] You can use the move tool to move the text around your image. I have chosen to center my text in the middle of the image for now. [img]https://i.imgur.com/f2oS4sd.png[/img] Now that you've added text, a box entitled "Layers" will be visible on the right-hand side of your screen. You can switch between your layers by clicking on them within this menu. You won't need to worry about layers much for this tutorial, but knowing how to utilize and switch between layers is important when creating more advanced graphics. ----- [size=5][b]STEP 5:[/b] Add a border (Optional)[/size] This step will teach you how to add a border to your image in Pixlr. This is not necessary and if you prefer the look of your image without a border, feel free to skip this step. First, make sure your background layer is selected. If not, click on the background layer in the "Layers" menu on the right of your screen to select it. [img]https://i.imgur.com/26xtudR.png[/img] Now, click on "Layers" in the TOP menu, where the red arrow is pointing. Select "Layer Styles..." in the dropdown list. If you're having trouble finding it, it is located right in the middle of the list. Once you've selected "Layer Styles..." another box will pop up. In this box, put a checkmark next to "Outer Glow" and click on the text to open up the options for Outer Glow. Adjust these as you like. For a completely solid border, raise Opacity and Hardness to the maximum. ----- [size=5][b]STEP 6:[/b] Add a Dragon (Optional)[/size] Adding a dragon is entirely optional. If you do not want to add a dragon to your image, simply skip this step. The first thing you want to do is go to Flight Rising and save the image of the dragon that you want to use to your computer. (Right click on the image and press "Save Image As..") Next, return to your Pixlr window/tab and select "File" in the top menu. In its drop down list, select "Open Image..." Find your saved dragon image and open it. Remember that Marquee Tool that was mentioned in Step 2? We are going to use it now. Select the Marquee Tool and drag it over the image so that the entire dragon is within the box you've created. The edges of the Marquee box will have dotted lines. Now this is where things get tricky. Select the "Edit" button in the top menu and click "Copy" in its drop down list. Ignore the Ctrl + C controls.. I personally haven't been able to get them to work in Pixlr. [img]https://i.imgur.com/p1G8mN9.png[/img] After you've clicked "Copy", then look for a small, white down arrow in the upper right corner of your screen, above the Layers box. Click on it. You should see the name (or Untitled if you have not named your image) of your custom image in the dropdown. Click on it to switch from the dragon image to your image. Now that you're back in your custom image's window, go back to "Edit" in the top menu and select the "Paste" option this time. If everything went well, your dragon image should appear inside of your custom image. If not, go back to your dragon image and repeat this step. Use the Move tool (mentioned in Step 1) to move the dragon image around your custom image. HINT - Make sure the dragon image layer is selected in layers, otherwise you won't be able to move it around. ----- [size=5][b]STEP 7:[/b] Save your image and upload to an image-hosting website.[/size] When you are satisfied with your image, click "File" in the top menu and select "Save..." to save your custom image to your computer. In order to display a saved image online, you will need to upload it to an image-hosting website. One of the most popular free image-hosting sites is [url=https://imgur.com/]Imgur.com[/url] and also the one we will be using in this tutorial. Visit Imgur.com and create an account. Once you've created your account and logged in, you should be presented with the screen shown in the image below. [img]https://i.imgur.com/R12MFxM.png[/img] From here, click on the circular icon in the upper right-hand corner of the page, next to your username. Select "Images" from the options shown in its drop down list. The images page is pretty straight-forward. There will be a big green button that says "Add Images". Click this to upload your custom image from your computer. ----- [size=5][b]STEP 8:[/b] Obtain the URL of your image.[/size] [img]https://i.imgur.com/lJQ6IcS.png[/img] Click on your uploaded image and copy the URL under "BBCode", which I have highlighted in the image above. ----- [size=5][b]STEP 9:[/b] Add your image to your signature (or elsewhere)[/size] Simply paste the BBCode link that you have copied into your signature, forum post, dragon's bio, clan profile, or elsewhere! Congratulations, you now have a shiny new custom image to display to the world. [emoji=guardian laughing size=1]

Holy hecc, thank you so much!

[img]https://media.discordapp.net/attachments/443182008903008269/678143706317979658/Screen_Shot_2020-02-14_at_11.39.03_PM.png[/img] I made this with the guide. I know it's a bit crude, but I'm still proud. It's going to get reworked since the Clan name won't be around for much longer, but I could learn a few more things from that.

Does this work on mobile? It doesn’t seem to work. I can’t open the installer.

I keeping this for future reference. It was super helpful!

bookmark for later