메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

아 .. -_- 제 홈페이지를 만들다가 갑자기 심각한 고민에 빠져버려서 -_-;;;;;
강좌를 쓰려고합니다.

#02. 개인홈페이지를 구성해보자.

개인홈페이지의 경우에는 정말 빠른 시일내로 홈페이지를 구성하고 완성하게 될 수 있습니다.
음.. 그렇다고 초 단시간 홈페이지가 된다는 소리는... 아니지요;

일단 개인홈페이지나 다른 어떠한 홈페이지도 주제를 먼저 정합니다.
주제만 정해버리면 간단하게 홈페이지를 구성하게 될 수 있는게 바로 개인홈페이지입니다.

가상적으로 여기서는 돌피인형 홈페이지를 만든다고 하고 구성을 해나가겠습니다.

1. 일단 돌피인형이 주제가되므로 모티브가될만한 사이트들을 검색해봅니다.
그리고 거기서 나오는 공통적인 메뉴바들은 체크를 해둡니다.
각자의 홈페이지마다 풍기는 느낌이 있을겁니다.
조잡하거나 , 깨끗하거나 등등... 'ㅡ'a

일단 위의 사항들을 꼼꼼히 체크를 해둡니다.
그리고 자신의 툴사용 능력을 최대한 사용할수있는 범위가 어디까지인지는 이해하고 있어야합니다.

2. 분위기를 정합니다.
돌피인형은 종류별로 다양하지요. 싸늘하거나 밝거나 귀엽거나...
저같은 경우에는 싸늘한 ;;;;; 것을 매우 좋아하기 때문에 싸늘한 분위기를 택하게됩니다.

분위기를 정했다면 천천히 구성을 할 단계가 되는겁니다.

2-1. 전체적인 색상 [ 색상톤 : 그레이 , 화이트&블랙 ,등등;;; ]
이렇게 되면 그레이톤이나 화이트&블랙톤이 싸늘한 분위기에 알맞을 껍니다.

이런 방식으로 자신의 홈페이지가될 전체적인 색상을 선택하게 됩니다.

2-2. 음악을 넣게되면 알맞은 분위기로;;
요즘에 보면 음악을 넣는 홈페이지들이 상당히 많아지고 있지요 'ㅡ'?
음악도 분위기를 정해주는 요소입니다.

3. 대강의 스케치를 시작합니다.
스케치에 필요한것들이요... 음 .... 어디보자;;

index 부분과 main 이 될부분정도면 되겠네요.
이부분에서 레이아웃을 잘 짜둬야합니다.
자신이 찾을 그림들. 그리고 그림의 위치등을 선정해야 하거든요.
분위기를 설정했으니까 그 분위기에 맞는 구도를 잡아둬야해요.

4. 메뉴정하기.
쓰잘때기 없어보여도 메뉴를 정하는것도 구성을 해둬야하는 부분에 꼭 필요한 부분입니다.
레이아웃을 짜면서 같이 생각하는것도 좋은 방법이겠지요.. [ 개인홈페이지에서는 별로 상관없습니다만은..
다른류의 홈페이지를 만들때는 메뉴를먼저정하기도 합니다.. 저는 메뉴를 나중에 정하는 성향이 강해서;; ]

ex) Profile / 주인장 소개
Tutorial / 포토샵강좌 , 나모강좌 , html 팁.. 등등 'ㅡ';
뭐 이런식으로 짜나가야죠; 큰 메뉴 -> 작은 부속메뉴.

기억해두세요 큰 메뉴 -> 작은 부속메뉴. -_-;;;; 광고같다는;;

5. 이미지 만들기.
저같은경우에는 거의 모든작업을 포토샵과 일러로 해버립니다 -_-;;; 대부분의... 사람이 아닐까;;
라고해도 되겠지요 ?? [ 플래쉬를 주로하시는 분들은 예외로 해두겠습니다;; 죄송합니다 ]
자신의 분위기에 맞는 이미지들을 찾아뒀겠지요?
그렇게 되면 스케치를 해둔곳에 알맞은 사이즈와 함께 여러가지 작업들을 해줍니다.

아마 3 , 5번을 계속 되풀이하게될 겁니다.
스케치에 대강맞게 만들었다 싶어도 막상 완성하고나면 어설프거나 안어울리다고 생각이들거든요.

6. 홈페이지를 최종적으로 구성합니다.
이부분이 가장 복잡할듯 하네요;;

6-1. index부분에 알맞게 레이아웃팅해줍니다. [ 스케치참조를하면서.. ]

6-2. 전체적인 구조 [ 각 페이지마다 구조가 다른것은 예외로 합니다. ]
모든 페이지의 모티브가될 페이지를 구성합니다.
[ 노 프레임도 제외로 해두지요;;; ]
프레임을 나누게되겠지요?
프레임을 나누는 순서도 대강대강 하시면 안된다는것을 나중에가시면 뼈저리게 느끼기전에
프레임도 하나하나 잘 생각하시면서 나누어 줘야합니다.

6-3. 사이트메뉴에 링크걸기.
링크방법이 여러가지가 현재 웹에서 나돌아댕기구있습니다.
요즘에는 거의 밑줄을 없애는게 기본이되어버린것처럼 느껴질만큼 깔끔하게 링크를 걸어야겠지요.
자신에 맞는 방법으로 링크를 걸어주면 전체적인 구조도 일단락되는겁니다.

마지막. 혹시나해서 적어두는 작은 팁같지도 않은 팁들.

아 난 미니사이트를 만들어서 보드를 사용하니까 너무 조잡해져요;
->> 이런경우에는 주로 새창을 띄우게 됩니다. 적당한 사이즈로 띄워주면 되겠지요;;

나도 XXXXXXX 님처럼 멋지게 만들고싶은데 잘 안되는데요..?
->> 처음부터 너무 멋지게는 안되는거랍니다. 그리고 자신만의 스타일을 익혀두는것도 중요합니다.

아... 다른것들은 다음에 적어두겠습니다 죄송합니다 ㅠ_ㅜ;;
배가고파....서;; 철푸덕
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48035
815 알람시계 만들기 [6] gimbob 2003.01.15 9576
814 폰트와 픽쳐튜브를 이용한 클래식한 제목 표시줄&테두리 만들기(초급) [4] file 2003.01.15 5479
813 일반디카사진 로모사진처럼 만들기!! [22] file Wings 2003.01.15 9672
812 쓰레기 글자 만들기 [18] file torayo 2003.01.15 7886
811 [ All User? ] #04. 홈페이지 짜임새있는 레이아웃 짜기. - 2부 - [8] Nersion 2003.01.15 11712
810 아래 가이드 선 그리는 것에 대한 보충강의 [5] 리쯔:) 2003.01.15 3750
809 [ Easy ] 가이드선을 나눌때 Shift 키 활용법. [7] Nersion 2003.01.15 10184
808 [ All User? ] #03. 홈페이지 짜임새있는 레이아웃 짜기. - 1부 - [6] Nersion 2003.01.15 15873
807 간단하고 심플한 문자디자인.. [8] file Darkness 2003.01.14 12071
» [ All User? ] #02. 개인홈페이지를 구성해보자. [8] Nersion 2003.01.13 11396
805 브러쉬만으로 흑백이미지 칼라로 바꾸기.. [23] file 엘프º 2003.01.13 5640
804 초간단 염색하기 (다른방법) [24] file puki 2003.01.13 17732
803 [ All User? ] #01개인홈피편. 웹디자인을 좀더 멋지게하려면 - 1부 - [7] Nersion 2003.01.13 6658
802 - 색채우기 단축키 [4] file 푸리 2003.01.13 3177
801 #.....합성으로.....신비한 이미지만들기!!..:..:..:..신비한가....;;..:..:..:.. [17] file 엘프º 2003.01.13 14545
800 액션스크립트를 이용한 쉬운 커튼효과 만들기(수정스크립트설명) [15] 이광민 2003.01.13 16803
799 이름아이콘 만들기(그림자 생기는것) [16] file prettymom 2003.01.12 10808
798 알록달록한 무늬 만들기 [6] file 마리아 2003.01.12 9298
797 이쁜동글이 버튼만들기 [6] file 이광민 2003.01.12 15434
796 [Wesley]크레이지 아케이드 홈페이지 따라하기 [19] Wesley 2003.01.12 8732