How is these kinds of boxes made?

[Lolm4te]

So, I have been wondering for a while, how are these boxes made?
[img]http://i.gyazo.com/f95f3efa2b84e5456a6db58a352f0c82.png[/img]
The edges, they look so smooth. Was just wondering how is it done? Is it done in Photoshop or in Lua or what? :p
Thanks in advance!

[AnonTakesOver]

looks like it's made with the surface library.

[LegendofRobbo]

[url]http://maurits.tv/data/garrysmod/wiki/wiki.garrysmod.com/index0d85.html[/url]

(used old wiki because the new one is garbage and has no examples or tutorials)

[Lolm4te]

Not the Model Panel, I was speaking about the box behind it :p
[img]http://i.gyazo.com/4e5682a9ff90749c5796af9d54728a34.png[/img]

Another example:

[img]http://i.gyazo.com/0e597d969d328188868a8d4778ce6819.png[/img]

[Icejjfish]

[QUOTE=Lolm4te;45396136]Not the Model Panel, I was speaking about the box behind it :p
[img]http://i.gyazo.com/4e5682a9ff90749c5796af9d54728a34.png[/img]

Another example:

[img]http://i.gyazo.com/0e597d969d328188868a8d4778ce6819.png[/img][/QUOTE]
[URL="http://wiki.garrysmod.com/page/VGUI/Elements/DPanel"]http://wiki.garrysmod.com/page/VGUI/Elements/DPanel[/URL]
And a paint function

[jackwilsdon]

Most likely using surface.DrawRect() twice, one with correct width, one offset on x and y by 1 (and inset on width and height by 2).

[Lolm4te]

[QUOTE=Icejjfish;45396576][URL="http://wiki.garrysmod.com/page/VGUI/Elements/DPanel"]http://wiki.garrysmod.com/page/VGUI/Elements/DPanel[/URL]
And a paint function[/QUOTE]

Obviously :v: But how does Neth manage to make the edge of the boxes so smooth. If I were to
draw a box in a paint function, it would just be a flat boring box.

[Walrus Viking]

[QUOTE=Lolm4te;45396943]Obviously :v: But how does Neth manage to make the edge of the boxes so smooth. If I were to
draw a box in a paint function, it would just be a flat boring box.[/QUOTE]

[lua]
surface.SetDrawColor( 46, 46, 46 )
surface.DrawRect( 0, 0, w, h )

surface.SetDrawColor( 0, 0, 0 )
surface.DrawOutlinedRect( 0, 0, w, h )

surface.SetDrawColor( 74, 74, 74 )
surface.DrawOutlinedRect( 1, 1, w - 2, h - 2 )[/lua]

Here's an example script:

[lua]local function ColorLightness( c, f )
-- No clamping
return Color(
c.r * f,
c.g * f,
c.b * f,
c.a
)
end

if SomePanel then SomePanel:Remove() end

SomePanel = vgui.Create( "DPanel" )
SomePanel:SetPos( 16, 16 )
SomePanel:SetSize( 128, 128 )
SomePanel:SetBackgroundColor( Color( 127, 0, 0 ) )

function SomePanel:Paint( w, h )
local c = self:GetBackgroundColor()

-- solid background
surface.SetDrawColor( c )
surface.DrawRect( 0, 0, w, h )

-- black outline
surface.SetDrawColor( 0, 0, 0 )
surface.DrawOutlinedRect( 0, 0, w, h )

-- highlighted background color
surface.SetDrawColor( ColorLightness( c, 1.6 ) )
surface.DrawOutlinedRect( 1, 1, w - 2, h - 2 )
end[/lua]

[LegendofRobbo]

I did the same thing with this:
[url]http://steamcommunity.com/sharedfiles/filedetails/?id=284111856[/url]
Its exactly as they said, adding drawoutlinedrect to your draw functions

(yes i know the black squares are a bit derpy, its still a prototype)

[Lolm4te]

Ye, I just did it like this; and it worked perfectly.

[lua]
local pnlColors = {
Background = Color(0,0,0), Shadow = Color(125,125,125), Main = Color(75,75,75)
}

pnl.Paint = function( s,w,h )
surface.SetDrawColor( pnlColors.Background )
surface.DrawRect( 0,0, w,h )

surface.SetDrawColor( pnlColors.Shadow )
surface.DrawRect( 1,1, w-2,h-2 )

surface.SetDrawColor( pnlColors.Main )
surface.DrawRect( 2,2, w-4,h-4 )
end
[/lua]