[cafe24]Logo 변경 - cafe24 logo제작 일기

다음은 cafe24의 로고를 제작하는 방법을 알아보겠습니다.

 

1.photoshop에서 로고를 제작해 보겠습니다.

     - file size는 가로 250px, 세로 100px로 제작하여 쇼핑몰의 로고를 변경하겠습니다.

'

 

2. 초기 시작화면 250 * 100 size로  Ctrl + R로 줄자를 호출하고, Ctrl + "로 픽셀줄을 불러와서 로고의 크기를 맞춥니다.

3.각각의 위치에 맞게 로고의 text를 입력하여 줍니다.

 

 

4.다음은 애니메이션을 제작하겠습니다

   windows  -> TimeLine을 이용하여 글자 애니메이션을 제작합니다.

5.또한 반응형 웹으로 제작하기 위하여 색상을 제거한 Logo를 제작해야합니다.]

   blackshirt 웹 색상표입니다.

B : #000000,  l  : #FF8C00, a : #A0522D, c : #B22222, k : #FF7F50 

S : #FF0000, h : #BC8F8F, i : #800000, r : #FA8072, t : #FF4500

6.cafe24에서 디자인 관리에서 디자인 수정을 클릭합니다

   디자인 수정에서 쇼핑몰 메인에서 head.html에서 로고를 클릭한 뒤, 해당 페이지로 이동합니다.

 

7.다음과 같은 코드를 head.html에 작성합니다.

 <img src="http://본인ID.cafe24.com/web/upload/(UploadFile).gif" alt="{$Logo_animation}" title="로고애니메이션"
    onmouseover="this.src='http://본인ID.cafe24.com/web/upload/(UploadFile).jpg'" 
    onmouseout="this.src='http://본인ID.cafe24.com/web/upload/(UploadFile).gif'" />

 

8.다음과 같이 본인 ID와 upload file 경로를 이용하여 로고를 넣어줍니다.

   완성되면 다음과 같은 애니메이션이 적용됩니다.

9.완성되면 다음과 같이 쇼핑몰 페이지가 이동합니다.

 

자세한 내용은  http://darkblack00.cafe24.com/index.html 여기로 이동해서 확인 바랍니다.