본문 바로가기

Design study

반응형
네이버 홈페이지형 블로그 링크걸기 - 두번째 - 네이버 홈페이지형 블로그 링크걸기 -두 번째- 네이버 블로그 투명 위젯을 사용한 링크걸기 두 번째 내용은 다수의 링크 방법입니다. 앞서 진행했던 내용과 크게 차이는 없으니, 쉽게 적용할 수 있을 겁니다. 위의 스킨을 확인해보면 이전 강좌와는 다른 점이 있을 겁니다. 바로 버튼이 한 줄 더 추가되어 있는데요. 이전 강좌에선 링크가 가능한 부분마다 하나의 버튼이 들어가 있어 해당 부분 또는 투명 위젯 전체에 링크를 연결시켰었는데요, 이번 내용에선 두 가지 버튼에 각각 따로 링크를 연결시킬 겁니다. 이전 강좌와 크게 다르진 않으니 소소한 부분은 그냥 넘어가겠습니다. 스킨을 제작하고 나서, 우리가 필요한 이미지맵 좌표값을 찾기 위에 이미지를 잘라줍니다. (170x600px) 이미지를 잘라내고 다음으로 필요한 건.. 더보기
네이버 블로그 링크걸기 네이버 홈페이지형 블로그 링크걸기 네이버 홈페이지형 블로그 스킨 작업 후 링크걸기에 대해 자세히 알아보겠습니다. 이전의 강좌에서 전체적인 디자인 후 메인에 링크 작업까지 해보았는데요. 이번엔 전 강좌에서 알려드린 소스를 조금 더 자세히 알아보겠습니다. 사실 기본적인 html 코드라 조금이라도 공부를 해보신 분들은 아주 단순한 내용이지만, 관련 분야가 아니신 분들에겐 생소하고 어려울 수밖에 없는 부분이 아닌가 합니다. 차근차근해보시면 생각보다 쉬운 내용이니 틀리더라도 계속 적용을 해보시면 금방 이해하실 수 있습니다. ★ 이전 강좌의 위젯 코드 해당 소스 코드는 이미지맵에 링크를 거는 내용인데요. 이미지 주소나 맵 네임등은 그냥 넘어가겠습니다. 이 부분만 이해하시면 주요 내용은 다 아시는 거라 요부분에 대한.. 더보기
네이버 블로그 메뉴바 투명하게 하기 네이버 메뉴바 배경 투명 작업 네이버 블로그 메뉴 창의 불필요한 배경을 지우는 방법을 알아보겠습니다. 스킨과 어울리게 기본 메뉴바를 이용할 수도 있지만 아무래도 깔끔하고 심플한 느낌을 주기 위해선 배경이 없는 게 보기가 깔끔합니다. 기본 스타일이 좀 구리 기도 하고요.. 아래 menu.png 파일을 다운로드하여 주세요. 블로그 관리 메뉴로 들어가서 세부 디자인 설정을 클릭합니다. 블로그 메뉴를 선택하고 직접 등록 선택 높이 36 지정후 위의 menu.png 파일을 등록하고 폰트 색상을 마음에 드는 걸로 지정한 후 적용을 합니다. 블로그 메인으로 가서 확인을 합니다. 메뉴바 배경을 없앰으로써 깔끔하고 심플한 느낌이네요. 이처럼 배경을 지울 수도 있지만 반대로 원하는 느낌으로 디자인하여 지정할 수도 있으니 .. 더보기
네이버 블로그 꾸미기 네이버 블로그 꾸미기 네이버 블로그 홈페이지형 꾸미기 방법에 대해 포스팅 해보겠습니다. 아주 기초적인 포토샵 작업만 가능하셔도 충분히 작업이 가능하니, 천천히 실습을 해보세요. 해당 강좌는 완전 초보의 기준으로 작성되며 혹여 막히는 부분이 있으면 언제든 뎃글 남겨주시면 도움드리겠습니다. ※ 이미지 클릭시 크게 볼수 있습니다. 아래 파일은 이번 강좌의 필요 파일입니다. 다운 받으시면 자료가 있습니다. ※ 레이아웃 PSD 파일, 작업용 png 파일 ▼ 1. 투명위젯을 만들기 위한 이미지를 올려줍니다. 스킨 설정에 앞서 블로그 글작성을 눌러 투명위젯용 이미지를 먼저 올려줍니다. 사진 선택 후 위의 첨부파일에 포함된 170x600.png 파일을 올려주세요. 글을 비공개 설정한 후 글 발행을 합니다. 2. 발행된.. 더보기
[Photoshop PSD]Instagram 템플릿 PSD 자료 Instagram 템플릿 PSD 인스타그램 템플릿 디자인 자료입니다. 파일은 위의 첨부 파일을 받으시면 됩니다. 따로 강좌는 없으며, 쓸곳이 있을까 싶어 만든거라 필요하신 분은 받아서 쓰시면 됩니다. 일부 디자인은 차이가 있을 수 있습니다. 더보기
[Photoshop Action] 포토샵 액션을 이용한 이미지 스케치화 포토샵 액션을 이용한 이미지 스케치화 하기 해당 강좌는 포토샵 액션을 적용하여 간단하게 스케치 이미지를 만들어보겠습니다. 참고로 이번 강좌는 외국 강좌를 보고 액션 파일을 직접 만들었기에, 중간 과정에 대한 설명은 따로 없습니다. ※ 포토샵 액션은 하나의 과정과 순서를 프리셋처럼 만들어 반복적인 작업의 시간을 단축시켜주는 도구입니다. ※ 본문 내용의 이미지가 잘 안보일시 클릭해주세요. 1. 위의 액션 파일과 예제용 이미지를 받아주세요. 2. 포토샵 액션[Alt + F9] 창에서 다운받은 액션 파일을 불러옵니다. 3. 액션창에서 불러온 내용을 확인 할 수 있습니다. 4. 예제용 이미지 또는 작업할 이미지를 불러온 후 액션을 선택하고 액션을 재생합니다. 5. 액션에 저장되어있던 작업 과정이 자동으로 실행되며.. 더보기
[Text Effect] 포토샵 네온 사인 효과 따라하기 포토샵을 이용한 폰트 효과 따라 하기 네온사인 폰트 효과를 내는 법을 알아보겠습니다. 이번 강좌도 혼합 옵션만을 이용하여 작업을 진행하였습니다. 해당 강좌의 옵션 세팅값을 그대로 따라 하실 필요는 없습니다. 1. 검은색 배경의 새로운 문서를 만들어줍니다. 2. 적당한 문구를 적어주고 색상을 지정해줍니다. (해당 강좌는 푸른빛 계열로 작업을 진행하였으며, 진행 과정에도 같은 계열의 색상을 사용합니다.) 3. 텍스트 레이어의 혼합 옵션으로 들어가서 외부 광선 효과를 적용합니다. 색상을 지정해주고 요소 부분의 크기 부분을 조절해줍니다. 4. 내부 광선을 선택합니다. 색상은 흰색을 지정해주고, 요소 부분의 옵션을 조정하여 폰트 사이즈에 맞게 효과를 줍니다. 5. 새틴을 선택하여 혼합모드, 옵션 값을 지정하여줍니.. 더보기
[Text Effect] 포토샵 폰트 효과 따라하기 - 캔디 포토샵을 이용한 폰트 효과 따라 하기 캔디 모양의 폰트 효과를 내는 법을 알아보겠습니다. 이번 강좌도 혼합 옵션만을 이용하여 작업을 진행하였습니다. 해당 강좌의 옵션 세팅값을 그대로 따라 하실 필요는 없습니다. 적당히 옵션 값을 조정해보시면서 어떻게 적용이 되는지 이해하시면 활용하는데 도움이 됩니다. 1. 새로운 문서를 만듭니다. 2. 텍스트 도구를 사용하여 문구를 작성합니다. 3. 텍스트 레이어를 선택한 후 마우스 우클릭하여 혼합 옵션을 눌러 옵션 창을 열어줍니다. 경사와 엠보스 선택 후 스타일은 "엠보스" 깊이와 크기는 이미지를 확인하여 적당한 입체감이 나올 정도로 지정하여 줍니다. 음영 부분의 각도와 높이를 지정해주고 그림자 색상을 지정하여줍니다. 4. 획을 선택하고 테두리 색상과 크기를 지정하여 .. 더보기