How to create an textbox and namebox from scratch?

[littanana]

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?

[drKlauz]

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.

[Kinmoku]

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

[OokamiKasumi]

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:

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:

Now to get the exact right shape you're after, you'll need to Warp both ovals.
-- Edit > Transform > Warp
Like so:

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:

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.

Go to Select > Inverse, and it will select Only your Outline. Fill that. No more blurry outline. (Don't forget to Deselect that outline.)

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.

Select the New Layer and FILL.

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:

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.

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.

Done.

I hope that helps.

[littanana]

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!