How to create an textbox and namebox from scratch?

Questions, skill improvement, and respectful critique involving art assets.
Post Reply
Message
Author
User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

How to create an textbox and namebox from scratch?

#1 Post by littanana » Thu Sep 22, 2016 3:24 pm

I'd like to do a textbox inspired by the one in animal crossing. I only have photoshop and it can only create perfect circles or rounded boxes and there is no middle option?

What software should I use for creating the UI?
Attachments
gfs_171980_2_1.jpg
gfs_171980_2_1.jpg (25.26 KiB) Viewed 1096 times

drKlauz
Regular
Posts: 67
Joined: Mon Oct 12, 2015 3:04 pm
Contact:

Re: How to create an textbox and namebox from scratch?

#2 Post by drKlauz » Thu Sep 22, 2016 3:51 pm

I'm 100% sure Photoshop is able more than circles. Check ellipse options. In CS6 it's gear icon, near "align edges", click it. There should be "unconstrained" option.

User avatar
Kinmoku
Veteran
Posts: 363
Joined: Mon Aug 11, 2014 9:39 am
Completed: One Night Stand
Projects: Love IRL, Memories
Tumblr: gamesbykinmoku
itch: kinmoku
Location: Germany
Contact:

Re: How to create an textbox and namebox from scratch?

#3 Post by Kinmoku » Wed Sep 28, 2016 3:39 am

For more custom curves, use the pen tool (P). This is used to create shapes and paths. Click and drag to create bezier curves, or click and release for sharp corners. You can also edit the anchor points to refine the shape, and play around with strokes, fills, components etc.

Basically, Photoshop has everything you'll ever need for UI :)

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

[Tutorial] creating an Oval textbox from scratch.

#4 Post by OokamiKasumi » Wed Sep 28, 2016 10:09 pm

littanana wrote:I'd like to do a textbox inspired by the one in animal crossing. I only have photoshop and it can only create perfect circles or rounded boxes and there is no middle option? What software should I use for creating the UI?
PhotoShop.
-- Start by making circle with the Elliptical Marquee tool and stretch it out into an oval. (You stretch it by Not Letting It Go while you pull to the side.)
-- You can also use the Move tool (the one at the very top of the toolbar,) to stretch the ovals.

Add a thick border. (Select > Modify > Border.) I used 10dpi.

Make a new layer (Layer 2) and Fill the outline. (Edit > Fill)
-- It doesn't matter what color you use because you can change all that by right-clicking on that layer and selecting Layer Properties.
-- Get rid of the outline. (Select > deselect)

Use the Move tool to put your outline where you want it.

It looks like this:
1.jpg
Make sure to look at the layers!
Right-Click on oval's layer. In my case, that's Layer 2. Duplicate layer.
--Move that layer to halfway below (or above) the original. (Remember to hit ENTER after every move.) Until you get something like this:
2.jpg
Now to get the exact right shape you're after, you'll need to Warp both ovals.
-- Edit > Transform > Warp
Like so:
3.jpg
I believe in cheating, so I just warped the one and duplicated that layer.

Next is hold down the Shift key and click on both layers, selecting them both. Then Right-click on one of the layers and Merge Layers. Then erase all the lines you don't need. Like so:
4.jpg
Now, you have an outline but the darned thing is fuzzy as hell. The way to make it far more crisp is with your Magic Wand tool. Using that tool, Select the Interior of your shape, Hold Down the Shift Key and select the Outside of your shape too.
5.jpg
Go to Select > Inverse, and it will select Only your Outline. Fill that. No more blurry outline. (Don't forget to Deselect that outline.)
6.jpg
Right-Click on that layer and select Layer Properties.
-- This is where all your decorating happens. I used: Drop-Shadow, Bevel & Emboss, and Pattern Overlay for the stripes.

Now, to make the Back or Interior of your textbox.

Using your Magic Wand tool, select the interior of your shape.

Make a New Layer -- and make sure it's Directly Under your outline layer!

Select > Modify > Expand. I used 3. This makes the back larger than the interior so there won't be any gaps.
7.jpg
Select the New Layer and FILL.
8.jpg
It doesn't matter what you use because you're going to be changing that by Right-Clicking on That Layer and selecting Layer Properties.

Now, since I didn't have that exact dot pattern, I had to select the one I did have, which was black dots on white, blown up to 200 magnification. I then added a new layer and merged those layers so I could Invert it to white dots on a black background. (Image > Adjustments > Invert.) I then added a dark gray Color Overlay set to multiply.

Now I have:
9.jpg
Next is to select same layer --the Back or Interior of the texbox-- and set that layer's Opacity (at the top of layer panel) to 66.

I then set a test image under that layer to check my opacity, and stretched & Distorted the box to suit my tastes.
10.jpg
All that's left is to shut off all the layers under my textbox, so I'm left with a clear background, trim it down to size then save as PNG.
11.jpg
Done.
oval_textbox.png
I hope that helps.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: [Tutorial] creating an Oval textbox from scratch.

#5 Post by littanana » Sat Oct 15, 2016 12:03 pm

OokamiKasumi wrote:
littanana wrote:I'd like to do a textbox inspired by the one in animal crossing. I only have photoshop and it can only create perfect circles or rounded boxes and there is no middle option? What software should I use for creating the UI?
PhotoShop.

-snip

I hope that helps.

Thank you so much! This was a massive help!

I'm just trying out different stuff, but so far this is what I made!
Attachments
Screenshot 2016-10-15 18.24.14.png

Post Reply

Who is online

Users browsing this forum: No registered users