# How do yuo..?

**URL:** <https://forum.kirupa.com/t/how-do-yuo/11701>\
**Category:** Uncategorized\
**Created:** [January 21, 2003, 5:43am UTC](https://forum.kirupa.com/t/how-do-yuo/11701 "2003-01-21T05:43:16Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![calaway42](https://avatars.discourse-cdn.com/v4/letter/c/d26b3c/32.png) [@calaway42](https://forum.kirupa.com/u/calaway42)\
**Post date:** [January 21, 2003, 5:43am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/1 "2003-01-21T05:43:16Z")

</div>

how do you get this boarder? can it be done in flash?  
[http://www.halovision.org/hv.exhibition/](http://www.halovision.org/hv.exhibition/)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:09am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/2 "2003-01-21T06:09:12Z")

</div>

What border? You mean like how there are scrollable textboxes inside the white area?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:13am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/3 "2003-01-21T06:13:21Z")

</div>

no i mean the boarder outside like around the header …

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:15am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/4 "2003-01-21T06:15:19Z")

</div>

It looks to me like a big white area and the content is divded by light grey round edge rectangles (there is a PS tool for that).

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:16am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/5 "2003-01-21T06:16:50Z")

</div>

i dunno y but every time i try to make borders or even that gradient blocks i screw up… i dont get the same result ☹

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:20am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/6 "2003-01-21T06:20:53Z")

</div>

Well when working with gradients it is hard to achieve an exact effect (or actually copying an effect will pretty much never give you the exact effect).

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:28am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/7 "2003-01-21T06:28:59Z")

</div>

do you know some tutorials for making templates like gradient on photoshop?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:38am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/8 "2003-01-21T06:38:31Z")

</div>

No, I don’t follow tutorials online too much. I tend to do my work out of experimentation. I have used some tutorials though, but mainly for sites that are already know. If you check the sticky thread in this section there is about a billion and one tutorials for PS. You are probably sure to find SOMETHING.

Here is my attempt at it…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:39am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/9 "2003-01-21T06:39:48Z")

</div>

thats cool… can i ask how you did it? 😃

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:48am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/10 "2003-01-21T06:48:27Z")

</div>

Created a 500x75 new image with a white background.

Used the round corner rectangle tool to create a grey rectangle.

Did the same process to create another inside.

I held CTRL and clicked on the layer that contained the second rounded rectangle (I will call it mainBevel). Then I took the gradient tool and set a light grey color (but darker than the borders light grey for contrast) as my foreground, and white as my background color. I started the gradient at the bottom of my selection and ended at the top. I then double clicked the layer to open up the Layers Properties and applied…

Drop Shadow: Opacity: 100, Angle: 96 (with global light), Distance: 2, Spread: 0, Size: 0

Bevel and Emboss: Style: Pillow Emboss, Technique: Chisel Soft, Depth: 1%, Direction: Up, Size: 1, Soften: 0

Stroke: Size: 1, Position: Outside, Blend Mode: Normal, Opacity: 15, Color: Black

Then hit Ok.

After doing that, create a new layer. This new layer will be the inset area where the logo goes. Repeat the same process as mainBevel, except do the gradient from top to bottom instead of from bottom to top. You can also right click on the layer with your mainBevel and choose “Copy Layer Style” and then click on your logoBevel layer and choose “Paste Layer Style”.

Tah Dah… done.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:49am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/11 "2003-01-21T06:49:39Z")

</div>

thanx beta !

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 6:51am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/12 "2003-01-21T06:51:31Z")

</div>

That is every step I did… step by step… so it should work.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 7:03am UTC](https://forum.kirupa.com/t/how-do-yuo/11701/13 "2003-01-21T07:03:52Z")

</div>

After repeating the same process on multiple rounded rectangles and pasting the same layer style I came up with this…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 5:56pm UTC](https://forum.kirupa.com/t/how-do-yuo/11701/14 "2003-01-21T17:56:58Z")

</div>

nice mini tutorial lib C:-)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [January 21, 2003, 5:59pm UTC](https://forum.kirupa.com/t/how-do-yuo/11701/15 "2003-01-21T17:59:55Z")

</div>

Thanks 🙂
