그동안 만들고 싶었던 신날로그의 블로그 로고를 만들어 봤습니다. 기존의 텍스트로 된 블로그 이름(제목) 보다는 확실히 이미지로된 로고가 훨씬 난듯합니다. 실력은 어설프지만 일단 나름대로는 만족하고 있습니다. 사실은 동생이 만들어주기로 했는데 기다리다 못참고 직접 만들어 봤습니다.
이미지는 포토샵 CS3 를 사용해서 만들었습니다. 생각보다 간단하더라구요.
블로그의 로고를 만들려면 이미지를 투명하게 만들어야 합니다. 그래야 블로그의 배경화면과 겹치지 않고 자연스럽게 어우러 질수 있습니다. 확장자는 Gif 나 Png로 저장하면 됩니다. Gif의 경우는 문제가 없지만 Png 이미지 파일의 경우는 인터넷 익스플로어6 에서 투명하지 않게 보이지 않는다고 하네요. 투명한 이미지를 만드는 방법은 장형진님의 깨끗하게 맑게 자신있게! 이미지를 투명화 시키는 방법 의 글에서 참고 하시면 좋을듯 합니다. 그리고 간단한 이해를 돕기 위해 제가 사용한 방법을 소개해 드리겠습니다.
포토샵으로 투명한 이미지 만들기
우선 포토샵에서 새파일을 만들때 Background Contents를 Transparent 로 체크합니다.
그리고 여러가지 폰트를 써서 자신만의 로고를 만듭니다. 이때 로고에 여러가지 그림자 효과를 주려면 Layer -> Layer Style -> Blending Option을 선택하여 조절해 주면 됩니다.
이렇게 해서 로고 글씨에 옵션을 다 설정해주면 이런 모습이 됩니다.
저는 여러겹의 레이어를 사용했기 때문에 Layer -> Merge Visible 로 이미지를 합쳐줬습니다. 다 완성이 되셨으면 저장을 해야하는데 반드시 Save for Web 으로 해야합니다. 그리구 확장자를 GIF나 PNG-24를 골라 저장하시면 블로그 로고 만들기는 끝입니다. 자, 다 만드셨으면 이제 적용을 해봅시다.
블로그 로고 이미지 업로드하기
우선 티스토리 관리자의 스킨 설정에서 조금전에 만든 png 파일을 직접 올리기에 업로드 합니다. 이때 주의 할점은 이미지 업로드 후 적용하기 버튼을 누르면 스킨이 초기화 되버리는 충격적인 사태가 벌어질지 모르니 반드시 조심 해야합니다.
업로드된 이미지의 주소는 .images/shine.png 가 됩니다. (shine 만 본래 이미지 파일명으로 교체)
블로그 이름(제목)을 로고로 교체하기.
스킨 변경 탭에서 HTML/CSS 편집 창으로 갑니다. 그런후 아래와 같은 곳을 찾습니다.
<h1><a href="[#$#_blog_link_#$#]">[#$#_title_#$#]</a></h1>
그런후 타이틀 부분을 아래와같이 변경해주시면 블로그 이름을 이미지로 변경 완료입니다.
<h1><a href="[#$#_blog_link_#$#]"><img src="./images/shine.png" /></a></h1>
자.. 어떠셨나요? 설명이 쉬웠는지 모르겠습니다. 실제로 공들인 시간은 긴데 설명하는 글은 짧군요.ㅎㅎ 아무쪼록 많은 분들이 멋진 블로그 로고를 만들이 블로그를 꾸미셨으면 합니다.
신날로그 로고 맘에 드세요~?
-[관련글]-
2007/06/12 - [블로그 Design] - 가장 아름다운 블로그 디자인 50가지
2007/05/08 - [블로그 Design] - 나만의 파비콘을 만들어보자~!
2007/05/05 - [블로그 Design] - [팁] 블로그에 예쁜 시계달기
이 글이 도움이 되셨다면 신날로그를 RSS로 구독하세요!
이메일로 구독하기
TRACKBACK :: http://www.shinalog.com/trackback/249
-
Subject: 엄청 고생하면서 알아낸 스킨 변경, HTML/CSS 설정시의 티스토리 버그와 팁입니다.!
Tracked from 살아가는 일이 허전하고 등이 시릴 때... 삭제안녕하십니~까? 블로그 연지 두 달도 안됐는데 벌써 블로그에 올릴 꺼리가 다 떨어져서 글쓸 거리를 찾아 불철주야 애쓰고 있는 파란토마토입니다. 먼저, 오늘도 허접한 제 블로그를 찾아주시는 남녀노소 여러분, 신사 숙녀 여러분, 재외 동포 여러분께 심심한 감사의 말씀을 올립니다. ^_____________^ 여러분께 보답하는 의미로 제가 알고 있는 블로그 팁들을 조금이나마 알려드리겠습니다. 내용은 티스토리 스킨 변경 시에 도움될 만한 팁과, 자주 발생하..
2008/01/03 20:58 -
Subject: 포토샵 초보 e-주민, 블로그 로고 만들기에 도전하다
Tracked from e-zoOMin's Eye 삭제예전에 신날로그에서 Logo Generador라는 사이트를 보고 블로그 로고를 만들어본 적이 있었는데, 딱 이거다 싶은 마음이 없어서 블로그에 달지 않았습니다. 그 뒤로도 로고를 자동으로 제작해주는 사이트 몇 군데에서 로고를 만들어보았는데 마음에 드는게 별로 없더라구요. 오늘은 생각난 김에 포토샵으로 만들기에 도전했습니다. 블로그 제목을 e-zoOMin's Eye로 바꿀 생각이어서, 로고의 컨셉도 "눈"을 기본으로 하기로 했습니다. 전반적인 컨셉은..
2008/05/12 11:36
댓글을 달아 주세요
전 몇 번 건드렸다가, 깨지는 현상이 생겨서 포기했답니다.
2007/12/27 23:03CSS... 공부하기에는 제 머리에 빈 공간이 더 이상 없어요 ㅠ,.ㅜ
저도 CSS는 너무 어려운듯..
2007/12/28 21:27하지만 로고만드는건 포샵만 하면되니 괜찮아요^^
포토샵에서 배경 투명하게 만드는 법을 몰랐는데 저렇게 하는거였군요-0-;
2007/12/28 01:49저도 장형진님한테 배웠습니다 ㅎㅎ
2007/12/28 21:27포토샵만 보면 왠지 머리가 아파지는것 같은..ㅋㅋ
2007/12/28 01:56윽~
2007/12/28 21:27그래두 해보니 얼마 안걸리던데요~~^^
음 저는 png확장자가 투명으로 안뜨네요.
2007/12/28 02:16우응?
흠; 그렇담 IE6를 쓰고 계신건가요~?
2007/12/28 21:28좋은 정보 감사합니다..^^
2007/12/28 02:32CS3 나름대로 공부중인데 많은 도움 되었습니다
비퍼플님도 멋진 로고 하나 만들어보세요~
2007/12/28 21:29포스팅이 도움이 되셨다니 다행이네요~ㅋㅋ 저거 쓸 때 은근 힘들여 썼는데 반응이 꽝이라서 슬펐다는 ㅠㅠ 어쨌든 너무 귀여워요 ㅋㅋ
2007/12/28 03:43에이~ 반응꽝이라뇨~ 저렇게 좋은정보는 오래도록 도움이 되요^^
2007/12/28 21:29오홋! 항상 궁금했던건데~ 감사합니다 ^^
2007/12/28 05:17올블로그 추천!!!
웃^^: 제가 더 감사합니다~
2007/12/28 21:30저두요, 이게 궁금했슴다,,
2007/12/28 05:21ㅋㅋ
로망님도 로고하나 만드시죠~~^^
2007/12/28 21:31아..이거 신기 하네요. 저도 해 봐야겠습니다. 정말 배울것이 많아서 좋습니다.
2007/12/28 07:01좋은 선물을 남겨 놓고 가셨군요. 감사 합니다. 한번 도전해 봐야겟습니다.^^
멋지게 만드셔서 꼭 보여주세요^^
2007/12/28 21:33그놈의 IE6이 없어져야 PNG파일의 기능을 제대로 사용할수 있을텐데 말입니다. IE6은 반투명지원이 안되는것뿐 아니라 PNG 이미지의 색상까지 더 진하게 표현하기 때문에 개판입니다.
2007/12/28 07:18GIF쓸때 오려낸 배경의 경계선이 깨끗하지 않다면, 배경이미지나 배경색을 같이 넣고 오려내는등 몇가지 오래된 웹디자이너들의 트릭이 있지요.
아하..그런방법이 있군요..
2007/12/28 21:34그런데 배경색이랑 같이 오려내다가 파폭 같은데서 삐뚤어져 보이면 난감하겠는걸요.. ㅎㅎ 좋은정보 감사합니다
중국에서 블로그를 운영하는 초보 블로거 입니다..
2007/12/28 09:48제대로된 블로그를 알고 간다는 것만으로 기쁘게 생각합니다.
좋은 글 잘 보고 갑니다.
오우 중국분이시군요~ 저는 미국인데^^ㅋ
2007/12/28 21:37참 블로그를 운영하니 세상이 더 좁아져요 ㅎㅎㅎ
댓글 감사드립니다^^
확실히 텍스트보다 이쁘네요..
2007/12/28 09:48그런데 제화면에는 배경이 투명하게 안 뜨는데요-_-
그냥 익스플로러 쓰는데, 약간 회색계통 배경떠요
으흠;; 인터넷익스플로어6 를 쓰시죠? IE7이나 파이어폭스는 잘보이는데.. IE6의 단점중 하나일듯 하네요
2007/12/28 21:39우와~ 멋있어요!!
2007/12/28 10:42또 따라해 봐야 겠는데요~~
근데, 파일을 잘 올릴 수 있을 지.. 벌써 걱정이 됩니다..
(못하면 계속 와서 여쭤볼게용...^^;;;; )
질문은 언제나 환영이구요~
2007/12/28 21:40멋지게 만들어서 보여주세요^^
좋은 정보네요.
2007/12/28 10:53저도 이런 거 하나쯤 만들어놓으면 좋은데.. 참 어렵습니다..
저두 하루 상콤히 날렸줘머 ㅎㅎ
2007/12/28 21:40그래두 잼있드라구요~
저도 CS3있는데.. ㅎㅎ
2007/12/28 12:03이거 꼭 해봐야겠는데요? ㅎㅎ
오늘은 너무 늦어 안되고 일단 기억해 뒀다가~ ㅋ
시도 해봐야겠어요 ㅋ
네네^^
2007/12/28 21:41로고 이쁘게 만드시면 꼭 말씀해주세요
좋은 정보네요~
2007/12/28 19:48있잖아요. PNG파일 이미지 링크거실때 ie7하고 파이어폭스에서는 기본적으로 투명하게 잘 나오는데요. 옛날 브라우져 ie6에서는 png파일이 투명하게 안나와용. 그래서 ie6에서도 바탕이 투명하게 나오게 하려면 img태그에 class="png24"를 꼭 넣어주셔야 투명하게 나온답니다.
이렇게요.
<img src="이미지 주소.png" class="png24">
아 감사합니다! 몰랐네요~ 당장 적용해볼게요^^
2007/12/28 21:42제 글에 자세히 읽어보시면 css에 추가해야할 부분을 자세하게 써놨는뎅 ㅠㅠ 그리고 이미지에 클래스값을 지정해주셔야 합니당. 이미지는 예쁘게 끝에도 잘 닫아주셨네요
이건뭐 잔소리쟁이... 어쨌든 웹브라우져계의 이단아 ie6입니당 ㅠ
2007/12/28 23:41아..자세히 읽고 추가했는데 안보이신다는 분이계셔서 적용이 안되는줄 알았어요.. 그럼 궁극님이 써주신 내용과 장형진님이 써주신내용 둘다 적용하면 되겠죠?^^;
2007/12/28 23:52오호- 멋져요 +_+
2007/12/29 23:56하지만 아직 다른 분들이 공유해주시는 스킨을 굽신굽신 받아쓰고 있는 저로써는... 먼나라 이야기 ㅠ_ㅜ
나중에 사진에 넣을 로고 만들 때 활용해 봐야겠어요 ㅋㄷㅋㄷ
뭐 저도 스킨은 기본으로 쓰고있어요^^: 맘대로 만져서 조금 달라보이긴 하지만..ㅎㅎ 나중에 한번 해보세요^^
2007/12/30 22:34좋은 정보네요. 나중에 맘 내킬때 이 글 보고 참고해서 한번 로고 만들어 봐야겠어요
2007/12/31 23:59훗~ 민트님의 이쁜 로고를 기대해보겠습니다^^ㅋ
2008/01/01 04:36감사합니다. 저도 로고로 바꿔봤습니다. 근데 질문이 몇개 있어요ㅠㅠ
2008/01/02 21:141. 로고 이미지를 넣은 후 태그, 지역로그, 방명록 등의 메뉴가 사라졌어요!!
왜 그런지 모르겠어요.. ㅜㅜ
2. 로고 이미지 height를 100으로도 해보고, 64로도 해봤는데...
중심에 가지 않고 로고위치가 아래에 있어요.
어떻게 해야 안정적인 위치를 맞출 수 있죠...?
음..이미지의 위치조정은 CSS쪽을 손봐야할것 같은데요.. 제가 보기에는 제대로 자리 잡은것같던데요? 수치상으로 맞추기 힘들다면 이미지 크기로 맞춰보는것도 나쁘지 않을듯해요,,
2008/01/02 22:17보이는건 글씨지만 이미지 크기자체는 더 크게할수 있으니깐요..^^: 설명이 잘됬나 모르겠네요;
그리고 썬샤인님의 로고는 하나로 붙은 게 아니라,
2008/01/02 21:30보니까 이미지가 3개인 것 같은데.. 맞나요?
저런 건 스킨html입력할 때 이미지를 3개 다 입력하신 거에요?
아니에요^^; 하나의 이미지에요
2008/01/02 22:15그리고 글에서 말했듯이 스킨 html에 이미지 경로만 입력했어요~
선샤인님.. 답글 감사해요. 근데 질문 1은 대답 안하셨어요.. 죄송ㅜㅜ;;
2008/01/03 00:13혹시 제 블로그에 방명록이랑 지역로그, 태그 등이 보이나요?
전 안보이거든요;;
예~ 잘보이든데요? 방명록만 글씨가 흰색으로 되서 잘 안보여요~ 파폭쓰시면 보기 -> 새로고침을 한번해보세요~
2008/01/03 00:29방명록..이랑 다 깨져서 결국 스킨 새로 설정했답니다ㅠㅠ
2008/01/03 09:43어쨋든.. 이글을 제 글에 링크할 텐데요.. 싫으시면 귀뜸해주세요~
멋있네요 ^^ 아직 미숙하지만 더 연습해서 좋은 로고 만들어봐야겠어요. 좋은정보 잘 보고갑니다 ^^
2008/01/08 06:03저두 아직 블로그 디자인은 미완성이라 계속 이리저리 고민입니다^^ㅎ
2008/01/08 23:28많은 도움이 되었습니다. ㅇ_ㅇ; 혼자 방법도 모르고
2008/01/09 22:57스킨위자드에서 타이틀 올리기만 파고 있다가 ㅠ ㅠ포기할까 했는데
고마워요~
^^ 도움이 되셨다니 저도 기쁘네요~
2008/01/10 00:26로고 이쁘게 만드세요~
감사합니다~!! 덕분에 바꿨습니다~'ㅡ' 좋은 정보 많이 얻어갑니다.^^
2008/01/17 02:16반갑습니다~
2008/01/17 02:39파비콘 무쟈게 귀엽습니다^^ㅋ
도움이 되었었어요 ^^ 늦게나마 올려요~!! 감사합니다!;
2008/02/19 03:37투명으로 하는 부분에서 헤매었었어요;
png가 조금 헷갈리면 gif 로 저장하셔도 무난합니다^^
2008/02/21 01:32반가워요 리니님~
썬샤인님 덕분에 블로그 로고 잘 만들었습니다~
2008/05/12 11:37방금 로고봤는데 멋지게 잘만드셨네요~!^^
2008/05/19 19:01센스가 있으시군요
검색하다 우연히 들러 이 글을 보고 블로그 스킨을 수정, 적용해봤습니다. 긴가민가 하면서도 타이틀을 이미지로 바꾸는 것이 은근 어려웠는데 덕분에 수월하게 했네요. 감사합니다.
2008/10/16 02:57비밀댓글 입니다
2009/06/13 13:08