볼록한 느낌의 검색창 만들기

일반적으로 나오는 검색창보다는 약간 꾸미고, 또는 나만의 검색창을 갖는것도 좋아보입니다. 물론 더 잘 보이게 크게 만드는것도 좋습니다.
여기서는 포토샵으로 볼록한 느낌의 검색창을 만들어보겠습니다.

우선 사이드바의 너비를 알아야겠죠. 사이드바에 넣은 경우입니다. 메뉴나 다른곳에 넣을경우는 그곳에 맞는 적당한 크기를 먼저 생각해두세요.
저의경우 너비가 240px 입니다. 적당한 크기의 박스를 하나 만듭니다. 높이까지 계산하시구요.

배경색을 투명으로 만들었습니다.
한가지 짚고 넘어가야 할것이 있습니다.
브라우져마다 보여지는 화면이 다릅니다. 웹표준에 다 맞지가 않기 때문에....특이나 ie6.0 은 골머리가 썩지요^^
화질이 png 파일이면 회색배경이 보이게 됩니다. 이부분은 해보시면 압니다.

대체적으로 이미지 화질에 구애받지않고 사용하기위해서는 바탕이 흰색이 좋습니다. 이건 블로그화면에서도 흰색이 가장 좋아보입니다.
배경색을 사이드바에 삽입하면 사이드바 배경색으로 해줘야 합니다.
저는 흰색이기때문에 흰색으로 하겠습니다.
배경색을 흰색으로 채우고 작업하기전 먼저 줄자로 화면을 나눕니다.
먼저 이미지를 보세요.

제가 제작을 해보니 그림자를 넣기위해서 외곽부분에서 약간 들어가서 만드는것이 좋습니다.
그리고 앞부분에는는 검색글을 쓰는부분과 뒷부분에는 검색버튼이 들어가는 부분입니다.
대략 보시고 우선 만들어보겠습니다. 그럼 엡니다~~~

이제 레이어를 추가한후 도형툴로 적당이 박스를 만들어줍니다. 일단 배경색을 사이드바에 어울리는 색으로 만든다음 만들어줍니다.
저의 경우 #cbc9b0 로 색을 만들고 박스로 만듭니다. 잘보이게 사이즈를 좀 키웠습니다.

이제 레이어를 떠블클릭해서 경사와 엠보싱을 클릭합니다.
기본으로 해도 됩니다. 그냥 아래처럼 합니다.

그림자도 살짝 넣어줍니다.

그럼 대략 아래 처럼 나옵니다.

여기까지는 검색창배경이였습니다.
이제 글을 쓰는 부분 , 검색창을 만들겠습니다. 레이어를 하나 추가하고 배경색을 흰색으로 합니다.
똑같이 박스를 하나 만듭니다.

위와 마찬가지로 경사를 좀 줍니다. 여기저 주의할점은 경사를 아래로 줍니다.
그래야 파인 느낌을 줍니다.
적당이 그림자도 살짝 넣어줍니다.

그럼 아래와 같은 이미지가 완성됐을겁니다.

다음에는 우측에 확인버튼을 만듭니다.
레이어를 추가한후 배경색보다 좀 진한색으로 합니다.
그다음 경사를 다시 위로 합니다. 처음에 배경에서 한것처럼요.

그럼 아래 모양이 됐을겁니다.

이제 레이어를 하나 다시 추가하고 글을 써줍니다.
한글로 할경우 중간에 한칸 띄어쓰기를 했습니다. 영어의 경우는 그냥 쓰면 되는데....ㅎㅎ.
그럼 대략 아래의 모습이 됐을겁니다.

문자 레이어를 떠블클릭해서 경사를 살짝줍니다.
이번에는 볼록하게 나온 느낌을 주기위해 외부경사로 1px 만 줍니다.

이제 완성된겁니다. 여기서 좀더 다듬는것은 여러분의 몫이구요. 대략 이정도만 하면 됩니다.
아래 완성된 모습입니다.

다음에는 이 그림을 가지고 블로그에 적용시켜보겠습니다.