메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

icon.jpg
안녕하세요. 최근에 홈을 만들면서 20여일동안 나모 공부를 독학하다보니 재미있기도 해서 여기에 처음으로 적어봅니다.
저같은 초보들을 위한 내용이니 고수들은 비웃지 마시고, 태클같은거 걸지 마시고 읽어 주시기 바랍니다.
이렇게 하는 것도 있구나 하는 마음으로 말입니다. ^^
정말 컴에 대해 아무것도 모르는 데 사람들이 나모를 약간 경시하지만 저는 나모 이상 편한게 없더군요,
인덱스 파일을 10번도 더 만들고 지우길 거듭...홈을 만들며 깨달은 점은 과욕하지말자 였습니다.
홈에 눈내리기도 만들어보기도 하다가 cpu를 많이 잡아먹는것을 알고.. 결론은 간단 명쾌 욕심부리지 말자 이더군요.

사족은 그말 달고 여기에 나모웹캔버스를 이용하여 버튼을 한번 만들어 보겠습니다.기준은 나모 6.0 FX입니다. 툴이름도 잘 모르니 그러려니 하고 읽어 주세요,

1.먼저 나모 웹캔버스를 열어 새글을 열어줍니다. 그리고 대략 사이즈를 300X500정도로 열어 줍니다. 그리고 왼쪽 원툴을 이용하여 적당한 크기의 원을 그립니다. 크기를 정확하게 하려면 맨 아랫부분에 사이즈가 실시간으로 조정되니 그걸 보고 맞추시면 됩니다. 물론 나모웹에디터를 사용하다가 들어가는 방법도 있지만 그럴경우는 부분적인 기능만 활성되므로 나모웹에디터와 함께 열어서 작업하면 더 좋을겁니다.

Image3.gif
Image4.gif

2. 그리고 그림을 지정한 후 자신이 원하는 이것저것의 라이브러리 기능을 사용해서 적절한(볼록 또는 오목 투명등)디자인을 선택합니다.

Image5.gif

저는 파란색 볼록그림을 선택하여 아래와 같은 그림을 만들었습니다..아래의 라이브러리 이것저것 마구마구 눌러서 원하는 모양이 나올때까지 클릭합니다(해보면 재밌습니다.).

Image6.gif

3.그리고 채우기와 테두리색을 마음대로 지정할수 있습니다(또다시 재미로 이것저것 지정해봅니다)
Image7.gif

4.마음에 드는색을 선택하였으면 텍스트툴을 클릭합니다. 그러면 아래와같은 텍스트 상자가 열립니다. 상자가 열리면 쓰고 싶은 글자를 씁니다. 글씨 크기는 상관없습니다.

Image8.gif

확인을 누르면 아래와 같은 글씨가 나타나며 원하는 위치에 크기를 왼쪽 검정색 화살표 툴을 이용하여 늘리거나, 또는 위치를 맞춥니다. 그러면 아래와 같은 들자가 나타납니다

Image10.gif

5.그런다음 이 글자를 선택한 후, 오른쪽처럼  라이브러리툴을 이용 또 마음대로 모양과 색깔을 바꾸고 채우기와 테두리를 이용하여 역시 멋진 글자를 만듭니다.
즉 이것은 텍스트와 원이라는 레이어 2개가 형성된것입니다. 원과 글자는 각각의 객체가 되는 겁니다.
* 나모 캔버스는 여기에 링크와 스크립트를 적용할수 있습니다. 그림을 선택하고 스크립트 또는 하이퍼링크를 클릭하면 아래쪽에 + 가 활성화 됩니다. 그곳에 기능을 넣으면 나중에 그림에 별도의 링크를 달 필요가 없게 되는 겁니다.

Image5.gif

그 후 저는 라이브러리와 채우기를 이용하여 아래 그림처럼 만들었습니다.  이제 완성된 아쿠아 버튼입니다. 이게 끝이냐구요. 아닙니다. 여기서 조금더 멋을 낼 필요가 있지요. 여기서 그림을 선택한 다음 맨위에 효과라는 도구를 클릭하면,4가지정도(가우시안, 베벨, 확산, 그림자) 의 기능이 나옵니다. 또 이것저것을 눌러보면서 마음에 드는 문양을 만들어 내십시오. 맘놓고 해도 되돌리기 기능이 있으니, 해보면 됩니다

Image12.gif

6.그림자 효과를 이용하여 아래와 같은 버튼을 완성하였습니다. 그리고 확산 효과의 크기는 또 마음대로 지정할수 있습니다.

Image11.gif

7.이것으로 완성이 아닙니다. 이제는 두개의 글자와 그림을 합치기를 하여야 합니다 역시 그림을 전체로 잡은 다음 아래하 한글에서처럼 묶기를 하면 간단하게 두개의 객체가 묶이게 되는겁니다. 주의할점은 각각의 객체에 효과를 줄수 있을뿐만 아니라 이처럼 묶어서 효과를 줄수도 있습니다. 아래 그림과 같은 경우는 각각의 객체에 효과를 주어 두개의 객체를 묶어 완성한겁니다. 이러면 하나의 버튼이 완성되겠지요.

Image14.gif

8.이걸로 끝이냐 그렇지 않습니다. 이젠 모양을 바꾸어 보겠습니다.
왼쪽 투명 화살표를 클릭하여 그림을 잡습니다. 그런다음 또 역시 하고 싶은대로 이렇게 저렇게 움직여 봅니다. 저는 이런 버튼을 완성하였습니다.

Image15.gif

9. 완성된 버튼입니다.
Image16.gif

10. 여기서 가장 중요한점은..저장하기 입니다. 그런다음 이것을 저장하면 언제든지 나모로 수정이 가능한 포토샵과 비슷한 형식의 png 파일이 완성이 됩니다. 저장 필요...나중 동일한 문양을 만들기 위해서...
모든 형식이 비슷하듯이 포토샵이나, 플래쉬처럼 내보내기를 하면 gif, jpg로 저장이 가능합니다. 그리고 글씨만 바꾸어 버튼을 대량생산 해내는 겁니다. 내보낼때 주의할점은 그냥 내보내기를 하면 문서전체가 나가서 파일이 커지고 자신이 원하는 파일이 만들어지지 않기 때문에, 격자문양의 기능을 선택하면 원하는 그림만 내보낼수 있게 됩니다.  그러면 끝입니다.

현재 약간 허접한 버튼이 완성되었으나, 이런 기능이 있음을 아시고 나모웹에디터와 함께 작업을 하면 엄청나게 편한 기능이라는 것을 알게 될겁니다. 일반 그림파일도 투명과 입체화면을 지원하므로 동적인 사이트를 만드는데 필요하겠지요.

너무 허접한 강의였지만 초보에게는 약간의 도움이 되리라 믿어 의심치 않으며...
지금 이 게시판에 글 올리는 것도 처음이라 한번은 로그인이 해제되어 지워져 버려 다시 쓰곤 합니다. 휴~
이것은 다른 프로그램과는 달리 한 30분정도 가지고 놀면 충분히 사용 가능하실겁니다.

그리고 나모로 만든 홈페이지를 구경하시려거든 한번 둘러 보시길..초보들 환영입니다. 저역시 초보이니깐요.

http://rainyday.pe.kr

감사합니다.


번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48027
» 나모웹으로 누구나 아쿠아 버튼 쉽게 만들기 [10] file 강우일 2004.01.13 21373
200 미니 홈페이지를 만들자 #4 [完] [8] Eva010 2004.05.29 20612
199 미니 홈페이지를 만들자 #3 [9] Eva010 2004.05.26 20147
198 [ All User? ] #03. 홈페이지 짜임새있는 레이아웃 짜기. - 1부 - [6] Nersion 2003.01.15 15873
197 [1분짜리 팁!] 베스트 웹디자인 10계명 -_-; [13] 찐군 2003.01.09 15794
196 [홈레이아웃] 나모로 작업한 홈 레이아웃 [8] file 여어자 2003.08.21 15501
195 [PSP정보]매우 좋은 사이트가 탄생 했네요 :) [5] 국왕 2002.02.27 14653
194 하이링고님의 말씀에 대한 공식적인 사과문 [4] 김광욱 2002.09.11 14621
193 미니 홈페이지를 만들자 #1 [6] Eva010 2004.05.25 14110
192 [제로보드강좌]1강. 내컴퓨터에 서버만드는방법(RWAPM 이용) [37] 네찌 2006.12.20 13829
191 [홈레이아웃] 점선 테이블홈 [7] file 여어자 2003.08.20 12783
190 [SWISH] 버튼만들기 4) Image버튼 (Sprite추가) [1] file 아메 2003.03.26 12762
189 쉬드와 함께하는 노프래임 홈페이지 5분만에 만들기 [38] file 쉬드 2004.07.18 12636
188 [홈 레이아웃] 큰이미지를 통채로 사용한 메인화면 [8] file 여어자 2003.10.02 12424
187 [SWISH]종이가 돌돌돌 펼쳐지는 효과 [4] file 여어자 2003.05.18 12371
186 [SWISH]간단한 플래쉬 서브메뉴 만들기   ▨ 동영상 ▨ [6] file 서기 2003.09.19 12182
185 [제로보드강좌]8강. 원프레임 사이트 만들기 (기본편) [53] 네찌 2006.12.30 11886
184 플래시 캐릭터 movie 만들기및 제작사례 [1] file parkys 2008.05.28 11845
183 [ All User? ] #04. 홈페이지 짜임새있는 레이아웃 짜기. - 2부 - [8] Nersion 2003.01.15 11712