세상에 하나뿐인 나만의 패널을 만들어 보아요 ! 1/3

[attachment=6:3u1v8utv]panel_image_title.png[/attachment:3u1v8utv]
우분투의 테마 설정은 참으로 다양합니다.
[b:3u1v8utv]부트 Splash, 창 가장자리, 로그인 화면, 아이콘, 컨트롤, 포인터, 바탕화면[/b:3u1v8utv] 등등이 조화를 이루어 종합적인 테마가 완성됩니다.

저는 비교적 단순한 것을 좋아해서 테마를 교체할 경우 창 가장자리, 아이콘, 바탕화면만 바꿔 주고
컨트롤은 우분투 기본에서 골라서 사용합니다.

이렇게 하다 보니 대부분 우분투 패널과 창 가장자리 사이에 색상 조화가 맞지 않아 보기 싫게 됩니다.
이 경우 패널만 따로 모양을 바꾸어 주면 훨씬 자연스러운 테마가 완성됩니다.

이 방법만 알아 두셔도 테마 꾸밀 때 선택의 폭이 두배 이상 늘어납니다.

패널(panel)의 모양과 폰트색 결정은 gtk 2.0을 따라갑니다.
자신의 홈 디렉토리에 [b:3u1v8utv].gtkrc-2.0 설정 파일[/b:3u1v8utv]을 만들어 여기에 패널 모양과 폰트색을 설정해 주면 패널의 모양을 바꿀 수 있습니다.

우선 패널 빈 곳에 [b:3u1v8utv]마우스 오른쪽 버튼[/b:3u1v8utv]을 누르고 [b:3u1v8utv]속성[/b:3u1v8utv]을 클릭합니다.
[attachment=1:3u1v8utv]panel_image_5-.png[/attachment:3u1v8utv]
위 그림과 같이 배경 탭을 클릭하고 [b:3u1v8utv]"없음 (시스템 테마 사용)(N)"[/b:3u1v8utv]에 맞추어 줍니다.

다음으로 배경 이미지로 사용할 그림 파일이 있어야 하는데 Gimp를 이용해 [b:3u1v8utv]가로 1픽셀 세로 24픽셀[/b:3u1v8utv]의 [b:3u1v8utv]png[/b:3u1v8utv] 이미지를 만들어 사용하거나
첨부 파일로 올린 배경 이미지를 받아서 이용하시면 됩니다.

배경 이미지가 준비되었다면 자신의 홈폴더에 저장해 줍니다.
보통 [b:3u1v8utv]~/.themes/panel[/b:3u1v8utv] 폴더에 많이 저장합니다.

[attachment=2:3u1v8utv]panel_image_4-.png[/attachment:3u1v8utv]
패널 예제로 요즘 유행하는 검은색 패널을 만들어 보겠습니다.

[b:3u1v8utv]~/.gtkrc-2.0[/b:3u1v8utv] 파일을 에디터로 생성해 주고 아래 내용을 붙여넣기 해 줍니다.
첨부파일에 .gtkrc-2.0 파일도 함께 들어 있으니 가져다 사용하셔도 됩니다.

[list:3u1v8utv][b:3u1v8utv]

패널 배경 이미지와 글자색 지정하기

style "my_panel"
{

배경 이미지 지정

bg_pixmap[NORMAL] = [color=#FF0000:3u1v8utv]".themes/panel/gray-neu.png"[/color:3u1v8utv]

메뉴와 경계선 색지정

fg[NORMAL] = "#ffffff"
bg[NORMAL] = "#000000"

창 목록 색지정

fg[ACTIVE] = "#000000"
bg[ACTIVE] = "#dfdfdf"

fg[SELECTED] = "#000000"
bg[SELECTED] = "#efefef"

fg[PRELIGHT] = "#000000"
bg[PRELIGHT] = "#ffffff"

}

GTK 2.0 등록

widget "PanelWidget" style "my_panel"
widget "PanelApplet" style "my_panel"
widget "fast-user-switch" style "my_panel"
class "PanelApp*" style "my_panel"
class "PanelToplevel*" style "my_panel"
widget_class "Mail" style "my_panel"
widget_class "notif" style "my_panel"
widget_class "Notif" style "my_panel"
[/b:3u1v8utv][/list:u:3u1v8utv]

붉은색 부분이 배경 이미지의 경로로 검정 그라데이션이 있는 [b:3u1v8utv]gray-neu.png[/b:3u1v8utv] 파일을 사용합니다.
[b:3u1v8utv]# 메뉴와 경계선 색지정[/b:3u1v8utv] 부분은 패널에 보이는 "메뉴폰트"의 전경색과 패널 아래 "경계선"색을 지정하고
[b:3u1v8utv]"# 창 목록 색지정"[/b:3u1v8utv] 부분은 현재 열려 있는 "창의 형태"에 따라 전경색과 배경색을 지정해 주는 부분입니다.

메뉴 폰트뿐만 아니라 [b:3u1v8utv]"창 목록"[/b:3u1v8utv]의 폰트도 설정을 해 주어야 보다 자연스러운 패널이 됩니다.

[attachment=5:3u1v8utv]panel_image_gtk-.png[/attachment:3u1v8utv]
[b:3u1v8utv]"창 목록"[/b:3u1v8utv]은 위 그림과 같이 현재 떠 있는 윈도우를 가리키며 포커스를 받고 있는 [b:3u1v8utv]ACTIVE[/b:3u1v8utv]와 받지 못한 [b:3u1v8utv]NORMAL[/b:3u1v8utv] 그리고
반짝이는 [b:3u1v8utv]PRELIGHT[/b:3u1v8utv] 마우스가 가리킬 때 밝아지는 [b:3u1v8utv]SELECTED[/b:3u1v8utv]로 나눌 수 있습니다.

각각의 전경색과 배경색 지정은 [b:3u1v8utv]#RGB[/b:3u1v8utv] 형식을 이용하게 되는데 색깔별 코드는 다음 사이트에 자세히 나와 있으니
골라서 사용하면 됩니다.

[list:3u1v8utv][url=http://blog.naver.com/psyturtle/40001467662:3u1v8utv][color=#000080:3u1v8utv][b:3u1v8utv]http://blog.naver.com/psyturtle/40001467662[/b:3u1v8utv][/color:3u1v8utv][/url:3u1v8utv][/list:u:3u1v8utv]

그럼 한 줄씩 살펴 보겠습니다.

[b:3u1v8utv]fg[NORMAL] = "#ffffff"[/b:3u1v8utv] 는 패널 메뉴폰트의 색깔을 지정합니다.
"#ffffff"는 흰색을 나타내므로 우분투 아이콘 옆의 [b:3u1v8utv]"프로그램"[/b:3u1v8utv] 폰트색이 흰색이 됩니다.

[b:3u1v8utv]bg[NORMAL] = "#000000"[/b:3u1v8utv] 은 원래 메뉴폰트의 배경색을 지정하는데 이미 배경은 이미지가 차지하므로 중요하지 않습니다.

단 이 색 지정에 의해 패널 하방 [b:3u1v8utv]"한 픽셀 높이의 줄"[/b:3u1v8utv] 색도 같이 지정하게 되므로
배경 이미지가 어두우면 어둡게 밝으면 밝게 맞추어 주셔야 보기 좋습니다.

[b:3u1v8utv]fg[ACTIVE] = "#000000"[/b:3u1v8utv]와 [b:3u1v8utv]bg[ACTIVE] = "#dfdfdf"[/b:3u1v8utv]는 [b:3u1v8utv]"창 목록"[/b:3u1v8utv] 포커스 창의 폰트색과 배경색을 나타냅니다.
배경의 회색이고 글자색은 검정색을 나타내게 됩니다.

[b:3u1v8utv]fg[SELECTED] = "#000000"[/b:3u1v8utv]와 [b:3u1v8utv]bg[SELECTED] = "#efefef"[/b:3u1v8utv]는 마우스가 가리키는 경우 폰트색과 배경색을 나타냅니다.
밝은 회색 바탕에 검은 글씨로 설정하겠습니다.

[b:3u1v8utv]fg[PRELIGHT] = "#000000"[/b:3u1v8utv]와 [b:3u1v8utv]bg[PRELIGHT] = "#ffffff"[/b:3u1v8utv]는 배경으로 동작하는 프로그램이 반짝일 때 보여주는 색을 지정합니다.
말로 설명하기 어려운데 예를 들어 pidgin이 백그라운드로 돌 때 반짝반짝합니다.
반짝여야 하므로 "NORMAL"과 반대로 흰색 바탕에 검은색 글씨를 선택합니다.

[b:3u1v8utv]"# GTK 2.0"[/b:3u1v8utv] 등록 부분은 손대지 마시고 그대로 사용하면 됩니다.
말로 하면 무척 어려워 보이는데 실제로 한 번만 해 보시면 "아하 !" 하실 겁니다.

이제 gnome-panel을 다시 실행시켜 새로운 패널을 불러오면 됩니다.
터미널을 열고 [b:3u1v8utv]$ killall gnome-panel[/b:3u1v8utv] 을 입력하면 잠시 후 새로운 패널이 뜹니다.

테마를 바꿔도 패널은 고정되며 혹시 패널에 [b:3u1v8utv]투명도[/b:3u1v8utv]를 설정하셨다면 해재하셔야 합니다.

배경 이미지를 얻는 방법은 여러가지가 있겠지만 주로 인터넷에서 테마 이미지를 캡쳐한 뒤 패널 부분을 [b:3u1v8utv]1x24[/b:3u1v8utv]로 따거나
에메랄드 테마의 창 제목 부분을 캡쳐해서 사용하면 전체적 조화가 잘 맞습니다.

[attachment=4:3u1v8utv]panel_image_3-.png[/attachment:3u1v8utv]
저는 에메랄드 테마인 gray-neu를 사용하는데 타이틀 바를 캡쳐해서 패널에 사용하고 있습니다.
이런식으로 에메랄드 테마와 패널을 통일시키고 아이콘과 배경화면만 바꿔주면 테마가 완성됩니다.

다음은 제가 첨부한 패널 이미지의 샘플입니다.

[attachment=3:3u1v8utv]panel.png[/attachment:3u1v8utv]

[b:3u1v8utv]Gimp[/b:3u1v8utv]를 사용하면 패널 이미지를 직접 만들 수 있습니다.
꼭 도전해 보세요 !

[b:3u1v8utv]아름다운 우분투를 위하여…[/b:3u1v8utv]

[url=http://ubuntu.or.kr/viewtopic.php?f=13&t=3843:3u1v8utv][color=#000080:3u1v8utv][b:3u1v8utv]세상에 하나뿐인 나만의 패널을 만들어 보아요 ! 2/3[/b:3u1v8utv][/color:3u1v8utv][/url:3u1v8utv]

좋은 글 잘 읽었습니다.

테마에 관심이 많은데 한글로 된 글(테마 제작에 관한)이 별로 없어서 아쉬웠는데 …
사실 영어로 된 글도 위 글만큼 쉽게 쓰여진 글도 없던 것 같습니다.
초보자가 테마를 만들기엔 어려운 점이 많은 것 같습니다.
예를 들면 GTK 테마 같은 경우 GTK 프로그래밍에 대해 알아야 한다든가 …

그 동안 GNOME LOOK에서 다운 받아 설치만 했는데
직접 제작하고픈 희망이 있습니다.

화산폭발님의 유용한 글들을 많이 올리시는데
다음 번엔 Metacity, GTK 2.X 테마에 관한 글을 올리실 생각이 없으신지 조심스럽게 물어봅니다. :lol:

[quote="bhjeong":2g7s7fgg]화산폭발님의 유용한 글들을 많이 올리시는데
다음 번엔 Metacity, GTK 2.X 테마에 관한 글을 올리실 생각이 없으신지 조심스럽게 물어봅니다. :lol:[/quote:2g7s7fgg]
좋게 봐 주셔서 감사합니다.

사실 위 글은 제가 많이 알아서 쓴 게 아니고 제가 필요해서 삽질하다 알아낸 겁니다.
Metacity나 GTK에 관해서 아는게 거의 없어서 올리고 싶어도 못 올립니다. 흑흑흑…

제가 아는 한도내에서 테마에 관한 팁 있으면 바로 올릴 예정이니 너그러이 봐 주세요.

[b:2g7s7fgg]저요 이제 시작했습니다. ^^;[/b:2g7s7fgg]

시작 하셨다하니 기대됩니다.

갑자기 의욕이 막 앞서네요. 김프도 좀 봐둬야겠고,
잘 된 패널 디자인은 뭐가 있나 흉내도 내 봐야겠고,
음~ :mrgreen:

[quote="bhjeong":1bhvorbu]시작 하셨다하니 기대됩니다.[/quote:1bhvorbu]
우분투 시작한지 알마 안 되었다는 말인데 오해하셨습니다. OTL
그래도 gimp 열심히 하세요 !

이미지 편집 프로그램은 포토샵이든 gimp든 하나 알아두면 두고두고 써 먹을 수 있습니다.
저도 팁 열심히 쓸께요.

[b:1bhvorbu]화이팅 !!![/b:1bhvorbu]

오우 이거 재밌는데요? 집에 가서 어여 테마 하나 맹글어야겠군요!!! 8-)

좋은 팁 감사드립니다.

검색해서 공부하려다 귀찮니즘으로 미루고 있었는데…

이렇게 쉽고 깔끔하게 정리해 주시니 정말 감사합니다. :D

[quote="화산폭발":1dnv717t]배경 이미지를 얻는 방법은 여러가지가 있겠지만 주로 인터넷에서 테마 이미지를 캡쳐한 뒤 패널 부분을 1x24로 따거나
에메랄드 테마의 창 제목 부분을 캡쳐해서 사용하면 전체적 조화가 잘 맞습니다.
[/quote:1dnv717t]제 패널은 높이가 최저 26 이더라구요.
다운받은 테마의 배경이미지는 10x24였는데… 높이가 약간 부족하여 패널 속성을 보니 26이더라구요.
그래서 10x26으로 이미지를 늘려주니 아주 예쁘게 딱 들어 맞았습니다. ^^

화산폭발님 글 중 아랫쪽 예제들을 봐도 그렇고 제가 만든 패널을 적용해봐도 그렇고 맨 아래 1픽셀이 적용된 테마의 패널색이 보이는 것 같네요. 아마도 현재 적용돼있는 테마에서도 무언가 손을 봐줘야하는 것 같습니다. 위쪽 이미지를 보면 맨 아래 1픽셀까지 모두 검은 색으로 적용이 잘 되어 있네요.

[attachment=0:3acsol6x]gnome-panel.png[/attachment:3acsol6x]

[quote="coreanlibero":36ful73m]화산폭발님 글 중 아랫쪽 예제들을 봐도 그렇고 제가 만든 패널을 적용해봐도 그렇고 맨 아래 1픽셀이 적용된 테마의 패널색이 보이는 것 같네요. 아마도 현재 적용돼있는 테마에서도 무언가 손을 봐줘야하는 것 같습니다. 위쪽 이미지를 보면 맨 아래 1픽셀까지 모두 검은 색으로 적용이 잘 되어 있네요.[/quote:36ful73m]
본문에 설명하긴 했는데 말로 하려니 어렵네요 !

[quote:36ful73m]bg[NORMAL] = "#000000" 은 원래 메뉴폰트의 배경색을 지정하는데 이미 배경은 이미지가 차지하므로 중요하지 않습니다.

단 이 색 지정에 의해 패널 하방 [b:36ful73m]"한 픽셀 높이의 줄"[/b:36ful73m] 색도 같이 지정하게 되므로
배경 이미지가 어두우면 어둡게 밝으면 밝게 맞추어 주셔야 보기 좋습니다.
[/quote:36ful73m]
말씀하신 1픽셀 줄을 없에기 위해 bg[NORMAL] = "#000000" 을 적용하시면 됩니다.
그림을 첨부할 걸 그랬습니다.

테마 예쁘네요 ! 누구 발인지 왕만합니다. ㅎㅎㅎ

아하… 역시 놓치시지 않고 적어놓으셨었군요… 꼼꼼하게 읽어보지 않은 제 잘못입니다… ㅠ_ㅠ

그나저나 1/2이 되었네요??? +_+

좋은글 잘보았습니다.

테마 찾아다니느라 시간도버리고 별로 맘에 쏙드는건 없었는데…
제가 만들수있게되니 정말 좋네요
감사합니다. :lol: