#178307 - NeonHB - Mon Dec 29, 2014 11:46 pm
In this tutorial, I?m going to be teaching you how to make the Linear Black/Grey custom border for blargSNES, which is available for download in this other topic. To start off, you?ll first need to install GIMP on your computer. GIMP is a free image editing program, similar to Photoshop. You can download GIMP from the GIMP website here. After you install GIMP, open the program and click on ?File?, then ?New?? to start a new project. You should see something similar to the images below, though note that if you want GIMP to be in a single window like I have it, you must click on ?Windows? and click on the last option on the list, titled ?Single-Window Mode?.
image 1
image 2
Once the ?Create a New Image? window opens, add 400 to the width and 240 to the height of the image size. Note that the small box next to height is selected in ?px?, this means pixel. 400 x 240 pixels is the size the custom border should be. Click on the OK button and you should see a white rectangle displayed on your computer?s screen. This white rectangle is called the canvas, and this is the image that will be displayed in blargSNES, once we export the image later.
The next step is to save your project, and be sure to save constantly when working on a project. It sucks to lose your work when something goes wrong. The ?Undo? button in ?Edit? also helps a lot in this type of situation. Click on File again, like when creating a new project, but this time click on ?Save As?? Where you choose to save the project is up to you, though I recommend saving it somewhere easy to find, like in Desktop.
I also recommend giving the project a recognizable name, like ?blargSNESborder1?, for example. If saved correctly, you should see your project?s name on the top of the GIMP window, and an ?.xcf? file with the name of your project wherever you saved it. For example, ?blargSNESborder1.xcf?. My project in the image below is called "blargSNES tutorial".
image 3
In my Linear Grey/Black custom border, I used three colors to make the image. The exact hex value for those three colors are listed below.
? Black ? #000000
? Dark Grey - #111111
? Light Grey - #333333
Soon you'll need to copy these hex values and paste them in the hexadecimal color notation box, visible in the FG/BG Color tab, while in GIMP mode. To enter GIMP mode you must click on the GIMP logo located on the top of the FG/BG Color tab. If you can?t find the FG/BG Color tab, then go to ?Windows?, like with the Single-Window Mode option from earlier, but this time go to ?Dockable Dialogues?, and click on ?Colors?.
image 4
Now that you have the three colors listed above for reference, select the pencil tool from the Toolbox. Where it says ?Size? on the Tool Options below the Toolbox, adjust the size to 1.00.
image 5
Find the ?Layer? tab. If you can?t see the ?Layer? tab on GIMP, go to ?Windows?, then ?Dockable Dialogues?, and search for ?Layers? in the list. Click on ?Layers? and you should be able to see the tab.
image 6
Rename the layer created by default to ?Background?, if it?s not that way already. This layer is where the dark grey and light grey stripes will be drawn later in the tutorial. To rename the layer, double-click on the layer?s name.
image 7
After renaming the default layer to ?Background?, open a new layer by clicking on the small paper icon in the bottom of the Layer tab. See the image above, there I marked the icon in red, and on the image above that image as well. If a window pops up giving you the option to name the layer, name it ?Middle Box". If there is also an option for ?Layer Fill Type?, select ?Transparency?. If after creating a new layer, you don?t get the option to name the layer via a window, name the newly created layer ?Middle Box? by double-clicking on the created layer?s name, as previously done.
image 8
Pick the color black by using the hex value that I gave you above (#000000). Copy the hex value and paste it in the hexadecimal color notation box located on the bottom of the ?FG/BG Color? tab, while in GIMP mode.
In this newly created layer called ?Middle Box? (make sure it?s selected and you don?t draw on another layer), we will be drawing where blargSNES displays the game while in 1:1 mode, which is in the box located in the middle of the top 3DS screen.
So you know where specifically to draw, I?m going to be giving you a series of coordinates. You can find these coordinates by moving your mouse around the canvas and looking at the (X, Y) coordinates on the bottom of GIMP. As you move down, the value of the ?Y? coordinate increases. As you move to the right, the value of the ?X? coordinate increases. Going to the contrary direction decreases the value until you hit the number ?0?, which is the edge of the canvas.
So, if you go to the top-left corner of the canvas you will find the coordinates (0, 0). If you go to the bottom-right corner of the canvas, you will find the coordinates (400,240), which is the resolution of the image, 400x240.
image 9
For the ?Middle Box? layer, find the coordinate (70, 6) and click on that one pixel to mark it black. This will be the top-left corner of our Middle Box. It should be close to the top-left corner of the entire canvas, or close to (0, 0) in coordinates. See the image below for reference.
image 10
Afterwards, without drawing, move the pointer all the way to the right in a straight line until you hit the coordinates (329, 6). Once there, hold the Shift key and click on the (329, 6) coordinate. There should be straight black line going from the coordinates (70, 6) to (329, 6). Since you first clicked on (70, 6), holding the Shift key and clicking on somewhere else in the canvas will draw a line from the first clicked coordinate to the second clicked coordinate. This will make the Middle Box easy to draw once you use the remaining coordinates for the corners below.
? Bottom-right corner = (329, 233)
? Bottom-left corner = (7, 233)
image 11
image 12
image 13
After you connect all the pixels and form the Middle Box outline, draw a border around the inside of the outline with the same black color to make the outline two pixels thick. Change your color to light grey (#333333) with the hex value that I gave you. Select the Bucket Fill Tool, which should be next to the Pencil Tool, and make sure that the Middle Box layer is selected. Then click on the inside of the Middle Box outline, not the border you just drew but the empty part, to fill it up with Light Grey color. If another layer other than the Middle Box layer is selected then chances are that you?re going to fill up the whole canvas with light grey and you?re going to be wondering what happened. If this happens you can always use ?Undo? in ?Edit? to go to the previous state before you messed up.
Here we are done with the Middle Box. What you have on your screen should look like the image below, without the red coordinates, of course.
image 14
Now we are done with the Middle Box, and will work on the background. Select the default layer that I told you to rename to ?Background? a few minutes ago. Make sure you have light grey (#333333) selected as your foreground color and dark grey (#111111) selected as your background color. By default, you have black as your foreground color and white as your background color. To change colors, follow what I told you about the ?FG/BG Color? tab and copy/paste the hex value for one then switch colors with the small white arrows pointing at the color squares and repeat for the other color.
Alternatively, you can also click on the background and foreground color squares near the Toolbox and paste the hex value on the HTML notation box.
image 15
Assuming that you have light grey (#333333) as your FG color and dark grey (#111111) as your BG color, select the ?Blend Tool? which is right next to the Bucket Fill Tool. If you can?t see it then go to the ?Tools? option on the menu bar, then go to ?Paint Tools?, and click on ?Blend?. Or, press the ?L? key on your keyboard.
Notice how the blend tool is configured in the image below.
image 16
? Mode is set to ?Normal?.
? Opacity is set to ?100.00?.
? Gradient is set to ?FG to BG (Hardedge)?, you can change this by clicking on the square next to ?Gradient? and the text, or manually writing ?FG to BG (Hardedge)? in the textbox.
? The Shape is set to ?Linear?.
? Repeat is set to ?Triangular Wave?.
? Offset is set to ?0.0?
? Dithering is checked.
? Adaptive Supersampling is unchecked.
If you have the Blend tool configured as shown above, then you?re ready for the next step. Using the Zoom Tool (magnifying glass) to zoom into the canvas may be helpful. Go to the coordinates (0, 1.0) (there are decimals now while blending), which is very close to the top-left corner of the canvas, and click-hold your mouse as if you were going to draw one pixel. While holding your click, drag your mouse down in a straight line 1.5 coordinates, until you reach (0, 2.5), and let go of the click-hold. Notice how the coordinates change as you move your mouse and you?re click-holding.
image 17
image 18
The pattern on your ?Background? layer should look like the image below.
image 19
At this point the most difficult parts of the custom border are done. What?s left is to draw a black, two pixel border throughout the whole edge of the canvas, like with the Middle Box layer, then make the ?blargSNES? text, and export the image.
For the border, select the color black (#000000) and select the pencil tool from the Toolbox. Then adjust the size to ?1.00?. Using the Shift key technique and while on the Background layer, draw lines from one corner of the edge of the canvas to the other, then do it again, but more inside the canvas by one pixel, to make the two pixel border around the canvas. See the red border on the image below.
image 20
For the text we?ll need a separate layer to draw on. Go ahead and create a new layer, and rename to ?blargSNES text?. You should have three layers in total, thus far. On this new layer we?ll need to draw a black rectangle before drawing the text, that way the text doesn?t blend with the striped background. Zooming in may help with the following steps.
image 21
The coordinates for the corners of the black rectangle are as follow:
? Top-left corner = (6, 225)
? Top-right corner = (60, 225)
? Bottom-right corner = (60, 231)
? Bottom-left corner = (6, 231)
After drawing the outline of the rectangle using the coordinates above, fill the inside of the rectangle with black color using the Bucket Fill Tool. Drawing the text inside the rectangle is easier than it looks. All the letters are only 5 pixels tall and 5 pixels wide, have 1 pixel spaced in between, and don?t touch the border of the rectangle. Draw 5x5 light grey pixel squares with 1 pixel spaced in between each square, and using the color black give the letters form. There are 9 letters in ?blargSNES?, so there should be 9 squares.
image 22
image 23
image 24
Once you have the middle box, striped background, canvas outline, and blargSNES text done, you?re ready for the final step; exporting the image to a compatible format. Remember to save your project before exporting the image. Then make sure that your image is in RGB mode. To verify, you can check on ?Image? in the Menu Bar, then ?Mode?, and ?RGB?. Finally, flatten your image by right-clicking on any layer and choosing the last option on the list, ?Flatten Image?.
To export the image, you go to ?File?, and click on ?Export As?? Once greeted with the ?Export Image? box, on the text box where it says ?Name?, type ?blargSnesBorder.bmp?. If exporting to a directory, and a file named ?blargSnesBorder.bmp? already exists, move the previous custom border somewhere safe so you don?t overwrite it with the new one. After choosing your destination, click ?Export? and when you see the box below, in Compatibility Options check ?Do not write color space information?, and in Advanced Options, select ?24 Bits/ R8 G8 B8?.
image 25
Now you?re ready to test out the custom border. Transfer it to the SD Card, boot blargSNES and enjoy!
image 1
image 2
Once the ?Create a New Image? window opens, add 400 to the width and 240 to the height of the image size. Note that the small box next to height is selected in ?px?, this means pixel. 400 x 240 pixels is the size the custom border should be. Click on the OK button and you should see a white rectangle displayed on your computer?s screen. This white rectangle is called the canvas, and this is the image that will be displayed in blargSNES, once we export the image later.
The next step is to save your project, and be sure to save constantly when working on a project. It sucks to lose your work when something goes wrong. The ?Undo? button in ?Edit? also helps a lot in this type of situation. Click on File again, like when creating a new project, but this time click on ?Save As?? Where you choose to save the project is up to you, though I recommend saving it somewhere easy to find, like in Desktop.
I also recommend giving the project a recognizable name, like ?blargSNESborder1?, for example. If saved correctly, you should see your project?s name on the top of the GIMP window, and an ?.xcf? file with the name of your project wherever you saved it. For example, ?blargSNESborder1.xcf?. My project in the image below is called "blargSNES tutorial".
image 3
In my Linear Grey/Black custom border, I used three colors to make the image. The exact hex value for those three colors are listed below.
? Black ? #000000
? Dark Grey - #111111
? Light Grey - #333333
Soon you'll need to copy these hex values and paste them in the hexadecimal color notation box, visible in the FG/BG Color tab, while in GIMP mode. To enter GIMP mode you must click on the GIMP logo located on the top of the FG/BG Color tab. If you can?t find the FG/BG Color tab, then go to ?Windows?, like with the Single-Window Mode option from earlier, but this time go to ?Dockable Dialogues?, and click on ?Colors?.
image 4
Now that you have the three colors listed above for reference, select the pencil tool from the Toolbox. Where it says ?Size? on the Tool Options below the Toolbox, adjust the size to 1.00.
image 5
Find the ?Layer? tab. If you can?t see the ?Layer? tab on GIMP, go to ?Windows?, then ?Dockable Dialogues?, and search for ?Layers? in the list. Click on ?Layers? and you should be able to see the tab.
image 6
Rename the layer created by default to ?Background?, if it?s not that way already. This layer is where the dark grey and light grey stripes will be drawn later in the tutorial. To rename the layer, double-click on the layer?s name.
image 7
After renaming the default layer to ?Background?, open a new layer by clicking on the small paper icon in the bottom of the Layer tab. See the image above, there I marked the icon in red, and on the image above that image as well. If a window pops up giving you the option to name the layer, name it ?Middle Box". If there is also an option for ?Layer Fill Type?, select ?Transparency?. If after creating a new layer, you don?t get the option to name the layer via a window, name the newly created layer ?Middle Box? by double-clicking on the created layer?s name, as previously done.
image 8
Pick the color black by using the hex value that I gave you above (#000000). Copy the hex value and paste it in the hexadecimal color notation box located on the bottom of the ?FG/BG Color? tab, while in GIMP mode.
In this newly created layer called ?Middle Box? (make sure it?s selected and you don?t draw on another layer), we will be drawing where blargSNES displays the game while in 1:1 mode, which is in the box located in the middle of the top 3DS screen.
So you know where specifically to draw, I?m going to be giving you a series of coordinates. You can find these coordinates by moving your mouse around the canvas and looking at the (X, Y) coordinates on the bottom of GIMP. As you move down, the value of the ?Y? coordinate increases. As you move to the right, the value of the ?X? coordinate increases. Going to the contrary direction decreases the value until you hit the number ?0?, which is the edge of the canvas.
So, if you go to the top-left corner of the canvas you will find the coordinates (0, 0). If you go to the bottom-right corner of the canvas, you will find the coordinates (400,240), which is the resolution of the image, 400x240.
image 9
For the ?Middle Box? layer, find the coordinate (70, 6) and click on that one pixel to mark it black. This will be the top-left corner of our Middle Box. It should be close to the top-left corner of the entire canvas, or close to (0, 0) in coordinates. See the image below for reference.
image 10
Afterwards, without drawing, move the pointer all the way to the right in a straight line until you hit the coordinates (329, 6). Once there, hold the Shift key and click on the (329, 6) coordinate. There should be straight black line going from the coordinates (70, 6) to (329, 6). Since you first clicked on (70, 6), holding the Shift key and clicking on somewhere else in the canvas will draw a line from the first clicked coordinate to the second clicked coordinate. This will make the Middle Box easy to draw once you use the remaining coordinates for the corners below.
? Bottom-right corner = (329, 233)
? Bottom-left corner = (7, 233)
image 11
image 12
image 13
After you connect all the pixels and form the Middle Box outline, draw a border around the inside of the outline with the same black color to make the outline two pixels thick. Change your color to light grey (#333333) with the hex value that I gave you. Select the Bucket Fill Tool, which should be next to the Pencil Tool, and make sure that the Middle Box layer is selected. Then click on the inside of the Middle Box outline, not the border you just drew but the empty part, to fill it up with Light Grey color. If another layer other than the Middle Box layer is selected then chances are that you?re going to fill up the whole canvas with light grey and you?re going to be wondering what happened. If this happens you can always use ?Undo? in ?Edit? to go to the previous state before you messed up.
Here we are done with the Middle Box. What you have on your screen should look like the image below, without the red coordinates, of course.
image 14
Now we are done with the Middle Box, and will work on the background. Select the default layer that I told you to rename to ?Background? a few minutes ago. Make sure you have light grey (#333333) selected as your foreground color and dark grey (#111111) selected as your background color. By default, you have black as your foreground color and white as your background color. To change colors, follow what I told you about the ?FG/BG Color? tab and copy/paste the hex value for one then switch colors with the small white arrows pointing at the color squares and repeat for the other color.
Alternatively, you can also click on the background and foreground color squares near the Toolbox and paste the hex value on the HTML notation box.
image 15
Assuming that you have light grey (#333333) as your FG color and dark grey (#111111) as your BG color, select the ?Blend Tool? which is right next to the Bucket Fill Tool. If you can?t see it then go to the ?Tools? option on the menu bar, then go to ?Paint Tools?, and click on ?Blend?. Or, press the ?L? key on your keyboard.
Notice how the blend tool is configured in the image below.
image 16
? Mode is set to ?Normal?.
? Opacity is set to ?100.00?.
? Gradient is set to ?FG to BG (Hardedge)?, you can change this by clicking on the square next to ?Gradient? and the text, or manually writing ?FG to BG (Hardedge)? in the textbox.
? The Shape is set to ?Linear?.
? Repeat is set to ?Triangular Wave?.
? Offset is set to ?0.0?
? Dithering is checked.
? Adaptive Supersampling is unchecked.
If you have the Blend tool configured as shown above, then you?re ready for the next step. Using the Zoom Tool (magnifying glass) to zoom into the canvas may be helpful. Go to the coordinates (0, 1.0) (there are decimals now while blending), which is very close to the top-left corner of the canvas, and click-hold your mouse as if you were going to draw one pixel. While holding your click, drag your mouse down in a straight line 1.5 coordinates, until you reach (0, 2.5), and let go of the click-hold. Notice how the coordinates change as you move your mouse and you?re click-holding.
image 17
image 18
The pattern on your ?Background? layer should look like the image below.
image 19
At this point the most difficult parts of the custom border are done. What?s left is to draw a black, two pixel border throughout the whole edge of the canvas, like with the Middle Box layer, then make the ?blargSNES? text, and export the image.
For the border, select the color black (#000000) and select the pencil tool from the Toolbox. Then adjust the size to ?1.00?. Using the Shift key technique and while on the Background layer, draw lines from one corner of the edge of the canvas to the other, then do it again, but more inside the canvas by one pixel, to make the two pixel border around the canvas. See the red border on the image below.
image 20
For the text we?ll need a separate layer to draw on. Go ahead and create a new layer, and rename to ?blargSNES text?. You should have three layers in total, thus far. On this new layer we?ll need to draw a black rectangle before drawing the text, that way the text doesn?t blend with the striped background. Zooming in may help with the following steps.
image 21
The coordinates for the corners of the black rectangle are as follow:
? Top-left corner = (6, 225)
? Top-right corner = (60, 225)
? Bottom-right corner = (60, 231)
? Bottom-left corner = (6, 231)
After drawing the outline of the rectangle using the coordinates above, fill the inside of the rectangle with black color using the Bucket Fill Tool. Drawing the text inside the rectangle is easier than it looks. All the letters are only 5 pixels tall and 5 pixels wide, have 1 pixel spaced in between, and don?t touch the border of the rectangle. Draw 5x5 light grey pixel squares with 1 pixel spaced in between each square, and using the color black give the letters form. There are 9 letters in ?blargSNES?, so there should be 9 squares.
image 22
image 23
image 24
Once you have the middle box, striped background, canvas outline, and blargSNES text done, you?re ready for the final step; exporting the image to a compatible format. Remember to save your project before exporting the image. Then make sure that your image is in RGB mode. To verify, you can check on ?Image? in the Menu Bar, then ?Mode?, and ?RGB?. Finally, flatten your image by right-clicking on any layer and choosing the last option on the list, ?Flatten Image?.
To export the image, you go to ?File?, and click on ?Export As?? Once greeted with the ?Export Image? box, on the text box where it says ?Name?, type ?blargSnesBorder.bmp?. If exporting to a directory, and a file named ?blargSnesBorder.bmp? already exists, move the previous custom border somewhere safe so you don?t overwrite it with the new one. After choosing your destination, click ?Export? and when you see the box below, in Compatibility Options check ?Do not write color space information?, and in Advanced Options, select ?24 Bits/ R8 G8 B8?.
image 25
Now you?re ready to test out the custom border. Transfer it to the SD Card, boot blargSNES and enjoy!