본문 바로가기
티스토리 블로그 html 배너 출력 플러그인 사용법 티스토리의 플러그인을 사용하여 html 배너 생성하는 방법입니다. 사이드바에 배너 생성하기 티스토리 블로그 메인화면의 사이드바에 html 배너를 생성하겠습니다. html 배너 플러그인 설치 티스토리 관리 > 플러그인 화면에서 배너 출력을 설치합니다. 배너 파일 업로드 티스토리 관리 > 스킨편집 > html 편집 > 파일업로드로 가서 배너 이미지를 업로드 시킵니다. 업로드 이미지 오른쪽 마우스 클릭 > 링크 주소 복사를 해놓습니다. html 배너 코드 적용 html 배너 모듈을 설치하였으므로 티스토리 관리의 사이드바 선택시 사이드바3에 html 배너출력 플러그인이 나타납니다. 편집 선택 배너 이름과 html 소스를 적용합니다. 의 코드 입력 배너 위치한 사이드바에 옮기기 사이드 바 > 기본 모듈 > 편집한..
무료 아이콘 다운로드 사이트 (ft. icon svg, png, 일러스트, 벡터) 아이콘 무료 다운로드 사이트 입니다. 1. icon finder 아이콘파인더 https://www.iconfinder.com/ 6,025,000+ free and premium vector icons, illustrations and 3D illustrations Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format. www.iconfinder.com 2. flaticon 플라티콘 https://www.flaticon.com/ Free Icons and Stickers - Millions of resources to download Download..
[상업용 무료폰트] 마루부리 다운로드 (ft. 2021 네이버 글꼴) 네이버 2021 글꼴, 마루부리 소개합니다. 네이버가 2021년 10월 9일, 한글날을 맞이하여 무료 글꼴, 마루부리를 공개하였습니다. 디지털 환경에 맞춰 한글꼴의 원형을 잇는 마루 마루 부리 글꼴은 디지털 화면에 최적화된 화면용 본문 글꼴로 2018년도부터 4년간 6만여 명의 사용자들과 함께 설계했습니다. 사용자의 의견을 모아 업데이트된 결과, 올해 5가지 타입의 굵기 구성(extra light, light, regular, semi bold, bold)으로 마루 부리가 완성되었습니다. 사람의 필기구와 쓰기 동작을 연상하게 하는 아날로그의 감성을 느낄 수 있는 마루부리 체입니다. 이제 무료로 마루 부리체를 다운로드 하는 방법을 알아보겠습니다. 1. 아래 링크로 이동(pc) https://blog.nav..
투명 배경의 파비콘 만드는 법(ft. favicon) 일반 파비콘을 제작하는 사이트는 png 파일을 넣어도, 흰 색 배경의 ico 파일로 생성해줍니다. 하지만 투명 배경의 파비콘이 필요할 때가 많지요? 이럴때 사용하는 사이트입니다. conventico https://convertico.com/ ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 점선 안의 박스에 이미 작업된 로고의 png나 img 파일을 넣으면 >바로 배경이 없는 ico 파일이 제작됩니다. icoconvert 위의 사이트로 진행시 크기가 클 경우, 원이미지 사이즈를 조..
무료 이미지 배경 제거 사이트 추천(ft. 포토샵 없이 누끼따기) 이미지 작업할 때 꼭 한 번씩 하게 되는 누끼 따기. 무료로 누끼따기를 초간편하게 할 수 있는 사이트를 추천하겠습니다. 1. 배경 제거 사이트 removebg https://www.remove.bg/ko 이미지에서 배경 제거 – remove.bg 이미지 배경 제거: 클릭 한 번 없이, 5초만에, 100% 자동, 무료. www.remove.bg 제가 가장 애용하는 사이트입니다. 회원 가입조차도 필요 없이, 이미지 삽입 후 3초 안에 결과물(png 파일)이 출력됩니다. 사용방법 이미지를 드래그 앤 드롭 또는 파일 업로드를 합니다. 업로드 후 3초 만에 누끼 까기가 완성됩니다. 이미지 업로드를 클릭하면 바로 다운로드가 됩니다. 2. 배경 제거 사이트 background burnner https://burner..
웹, 앱 무료 컬러 색상 추출 사이트 추천 (ft. color 추천, 두 컬러 조합) UI 디자인을 위한 컬러 선택에 참고할 사이트를 추천합니다. 프로젝트 UI 디자인 작업을 할 때, 가장 중요한 것이 컬러 구성입니다. 어떤 컬러를 선택할지, 몇가지 컬러는 사용할지, 컬러를 어떻게 조합하여 사용할지, 매번 고민하고, 시간을 투자하여 결정합니다. 컬러에 어려움을 느낀다면 주로 아래 추천사이트에서 색을 추출하여 사용하세요. 고민 없이, 30초 안에 컬러 선택과 추출한 후 바로 적용이 가능합니다. 1. 2 Color Combinations - 어울리는 2개 컬러 최근 가장 애용하는 2가지 어울리는 색 세트를 찾아주는 사이트입니다. https://2colors.colorion.co/ Two Color Combinations Two color combination palettes 2colors.c..
[상업용 무료폰트] 둥근모꼴 다운로드 90년대 PC통신에서 사용되었던 글꼴, 둥근모꼴입니다. 둥근모꼴은 옛날에 사용하던 고전식 스타일 폰트입니다. 레트로한 감성과 디자인이 필요한 문구에 딱 사용하기 좋은 폰트입니다. 마리오 또는 한글타자 게임, 응답하라 1997에서도 나왔던 베네치아 게임이 생각하게 하는 옛날 느낌의 글꼴입니다. 이제 무료 다운로드하는 방법을 알아보겠습니다. 1. 아래 링크로 이동 https://cactus.tistory.com/193 둥근모꼴+Fixedsys 둥근모꼴+ Fixedsys 1.3 가나다라마바사아자차카타파하힣 ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㄳ ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅝㅞㅟㅠㅡㅢㅣ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567 cactus.tist..
[무료아이콘폰트] 폰트어썸 Font Awesome6 사용법. 사이트 적용하기 웹사이트를 만들 때 아이콘 많이 사용하시죠? 아이콘은 이미지와 텍스트를 대체하는, 보다 직관적으로 표현하면서, 사이트를 심플하게 디자인해 줍니다. 제가 퍼블리싱 학원을 다닐 때 선생님께서 사이트에 이미지가 텍스트가 너무 많으니, 빼고 아이콘으로 대체하라 라는 조언을 많이 해주신 다음부터, 아이콘을 필수적으로 사용하고 있습니다. 이럴때 사용하는 가장 유명한 아이콘 제공 사이트, 폰트어썸을 소개하겠습니다. 폰트어썸은 웹에서 사용하는 아이콘 폰트를 제공합니다. 아이콘은 이미지가 아닌 폰트 이기 때문에 css를 통하여 사이즈, 컬러 수정이 자유롭게 설정이 가능합니다. 폰트어썸에서 제공하는 무료 아이콘 숫자는 현재 기준, 1,609개(유료 7,865개)로 검색하면 웬만한 것들은 무료로 제공이 됩니다. 폰트어썸 내..
[무료템플릿] 미리캔버스로 이벤트 배너 만들기 이벤트의 아이디어를 기획하고, 이벤트 페이지를 구성하고, 제작하는 일은 제법 시간이 많이 필요합니다. 페이지에 삽입할 홍보 문구, 개인정보 요구의 여부, 사용할 이미지에 관하여, 어떤 것을 사용할지, 이미지의 저작권, 레이아웃까지 모두 고려하여 만들어야 합니다. 하지만! 이런 고민들을 빠르게 해결해 주는 무료 템플릿이 있습니다. 뚜둥! PPT, 로고, 배너, 카드 뉴스, 상세페이지, 썸네일 등을 미리캔버스 템플릿을 이용하여 정말 빠르고, 편하게 제작할 수 있습니다. 여기서 중요한 것은, 저작권 걱정 없이, 상업적 사용이 가능합니다. 저작권 관련 사항은 이 포스트의 맨 아래 부분에서 확인해주세요. 미리 캔버스 이용 방법에 대하여 알아보겠습니다. 미리 캔버스 홈페이지 이동 회원가입 후 로그인해주세요. htt..
[상업용무료폰트] 인쇄용 제목용 바탕체 추천(ft. 바른바탕체 kopub바탕체) 실무를 하다가 상장 양식의 제목 및 이름에 사용할 폰트가 필요하여 찾아보았습니다. 인쇄용 문서 제목에 사용하기 좋은 상업용 무료 바탕체 2가지를 추천하겠습니다. 바른 바탕체 (대한인쇄문화협회) 대한인쇄문화협회에서 국고지원을 받아 인쇄 및 출판, 디자인 업계를 대상으로 인쇄 공용 서체인 바른 바탕체와 바른돋음체의 한자 서체를 개발하여 완성도 놓은 한자서체의 제공 및 출판 인쇄 환경에 최적화된 서체를 개발 공급하게 되었습니다. 모든 인쇄물과 디자인에 상업용 사용이 가능하여 바탕체를 이용하여 인쇄용 문서 제목에 사용하기 적합합니다. 이제 무료 다운로드 하는 방법을 알아보겠습니다. 1. 아래 링크로 이동 www.print.or.kr/bbs/board.php?bo_table=B52&wr_id=9 자료실 > 바른체..
[상업용무료폰트] 교보문고 교보 손글씨 2019 다운로드 저작권 걱정 없이 상업적으로 사용 가능한 폰트 중 출판 인쇄물, 웹, 광고물 등 여러 가지 다양한 분야에 사용할 수 있는 폰트를 소개하겠습니다. 교보문고의 "교보 손글씨 2019"입니다. 교보 손글씨 2019는
[상업용무료폰트] 티몬 몬소리체·티움체 다운로드 티몬 몬소리체는 몬스터 세계의 언어 '몬소리'를 컨셉으로 만들어진 언어입니다. 오늘은 소셜커머스 오픈마켓의 '티몬'에서 제작하여 배포중인 상업용 무료폰트 "몬소리체", "티움체"를 소개하겠습니다. 티몬 몬소리체는 부드러운 굴림과 임팩트 있는 굵기를 강조한 디자인으로 제작하였습니다. 매우 두터운 굵기의 느낌으로 제목 서체로 쓰기 좋고, 강조할 부분에 적용하기에 좋아요. 티몬글꼴에는 총 2가지, '티몬 몬소리체'와 '티몬 티움체(영문 전용)'가 있습니다. 티몬에서 회사 및 서비스 명칭등의 영문 표기를 위해 티몬의 브랜드를 표현할 수 있는 영문전용 티몬 티움체를 개발하였습니다. 티움체는 견고함과 안정함을 나타내 주는 글꼴입니다. 글꼴의 모서리는 둥근 세리프를 강조하여 소설커머스에서 줄 수 있는 고객과의 유대감..
[상업용무료폰트] 빙그레체 다운로드 오늘 소개할 무료 상업용 폰트는 빙그레체 입니다. 국민 모두가 즐길 수 있는 ‘바나나맛우유',‘투게더', '요플레',‘메로나'의, 그 빙그레 입니다. 1976년 창립되어 국내 식품 산업을 선도해 왔습니다. 이전에 알지 못했었는데 '붕어싸만코', '꽃게랑', '더위사냥', '땅또아'가 빙그레 작품이라고 합니다. 빙그레에서 빙그레체를 시작으로 빙그레체2, 빙그레 따옴체, 빙그레 메로나체를 제작하여 상업용 무료폰트로 제공하고 있습니다. 사이트를 여러가지 서체를 확인하실 수 있습니다. 자, 이제 빙그레체를 소개합니다! 건강, 행복, 미소 컨셉의 빙그레체는 빙그레 바나나맛우유의 로고를 모티브로 디자인하였습니다. 훈민정음 제자원리에 따라 초/중/종성을 분리하여 각 자소의 독립성을 유지하였으며, 자소의 굴림이 부드럽..
[상업용무료폰트] 야놀자체 다운로드 오늘의 무료폰트는 상업용 무료폰트 야놀자체(=야체) 입니다. 동글동글하게 친근하게 생긴 글자입니다. 특히 자음 "ㅇ"과 "ㄹ" 이 유난히 귀엽습니다. 야놀자체는 전국 숙박업체의 미니홈피 스타일의 홈페이지에서 시작하여 어마어마하게 큰 기업이된, 광고에 많이 나오는 그 야놀자 기업에서 제작하고, 2015년 한글날을 맞아 무료 배포했습니다. · 야체는 직접 쓴 손글씨를 모티브로 하여 정형적인 네모 글씨에서 탈피하여 리듬감과 자유로움을 부여했습니다. · · · 한글, 영어, 숫자, 특수문자까지 지원하고, 폰트 굵기는 Regular, bold 2가지 있습니다. · 아래처럼 별도의 디자인 없이 야놀자체 텍스트로만 이용하여도 디자인의 효과가 있습니다. · 메인 타이틀에 사용하니 아기자기한 느낌이 들면서 보는 동시에 ..
[포토샵] 배너 배경. 방사능 패턴 만들기 배너 배경용으로 많이 사용하는 방사능 패턴을 만들겠습니다. 웹사이트에 사용할 배너를 만들때, 배너의 배경을 어떻게 할지 고민을 많이 합니다. 이럴 경우 사용하는 방사능 패턴입니다. 포토샵의 Define Pattern과 Filter 메뉴의 Polar Coordinates 기능을 이용하겠습니다. 포토샵에서 패턴을 만들어 등록할때 Define pattern 메뉴를 강조 효과를 주기 위해 Polar Coordinates 기능을 사용합니다. 새문서 설정 먼저 ctrl n 또는 file-new로 배너용 새문서 창을 오픈해주세요. · 문서 크기: 700X700px (적당한 크기로 만들어주세요.) · Resolution: 72 · Background Contents: Tranparent(투명) 패턴용 새문서 설정 패턴..
[상업용무료폰트] 스웨거 폰트 다운로드 상업용 무료폰트, 스웨거 폰트에 대하여 알아보겠습니다. 스웨거 폰트(스웨거체, SWAGGER FONT) 남성 라이프 스타일 브랜드 스웨거에서 디자인 컨셉 및 시안 개발에 직접 참여하고, 국내 최대 폰트 개발사인 산돌커뮤니케이션의 노하우를 통해 2015년 1월에 완성한 폰트입니다. 이렇게 공들여 만들어진 폰트를 2016년 10월 9일 한글날을 맞아 한글을 사랑하는 모든 분들이 자유롭게 사용하실 수 있도록 무료로 배포합니다. 스웨거체를 기획하게 된 계기 영어가 아닌 한글을 활용하여 가장 스웨거스럽고 젊고 트렌디한 디자인 로고를 만들기 위해 고민하던 중 국내에서 영문 로고로 판매 중인 상품을 한글 로고로 대체하는 것을 목표로 삼아 디자인을 하기 시작했다고 합니다. 스웨거 영문 로고의 곡선 느낌이 스웨거 폰트에..
[상업용무료폰트] 고도체 다운로드 쇼핑몰 상세 페이지나 유투브에 폰트를 이용할때 상업적으로 사용이 가능한지 사전에 확인해야 합니다. 아무 폰트를 다운받아서 사용하면 추후에 저작권 법에 위반되어 거금을 벌금을 내야하거나, 양이 많을 경우 폰트를 갑자기 바꾸어야 하는 바람에 속앓이를 할 수 있기 때문에 폰트 선택이 중요합니다. 이런 걱정 없이 상업적으로도 이용 가능한 또 하나의 무료폰트, 고도체를 소개하려 합니다. 고도체는 엔에이치고도(주)에서 상품을 돋보이게 하고 쇼핑몰의 정보와 개성을 효율적으로 표현하기 위해 개발하였습니다. 이 폰트는 개인은 물론 기업에서도 상업적으로 이용이 가능하기 때문에 여러분의 직장 홈페이지, 쇼핑몰, 유투브, 블로그 등에 자유롭게 사용할 수 있습니다. 엔에이치고도(주)에서 제공하는 폰트는 고도체/godo roun..
[포토샵] 일자 리본, 둥근 리본 만들기 이벤트 페이지 또는 상세 페이지를 작업할 때 많이 사용하는 리본을 만들겠습니다. 주로 페이지의 타이틀이나 중요한 파트 제목을 작업할 때 유용하게 사용합니다. 반듯한 일자 리본 & 아치형의 둥근 리본 모두 만들어 보겠습니다. 1. 파일 오픈, 문서 설정 먼저 ctrl + n 또는 file new로 새 파일을 오픈해주세요. 사이즈는 넉넉하게 width 700px, height 700px, resolution 72입니다. (사이즈는 자유롭게 해 주세요.) 2. 사각형 그리기 도구 모음에서 rectangle tool 클릭 후 영역 드래그하여 사각형의 도형을 만들어 주세요. Fill은 원하는 컬러, stroke(테두리)는 0으로 지정해 주세요. 3. 둥근 아치형 모양 만들기(일자 리본에는 적용 안 함) 도구 모음..
[인디자인] 셀프 명함 만들기 오늘은 셀프로 돈 안 들이고, 간단하게 인디자인을 이용하여 나만의 명함을 만들어 보겠습니다. 사전에 로고가 담긴 일러스트 파일이 필요하고, 기본적인 레이아웃 구상이 필요합니다. 1. 문서 설정하기 ctrl n 또는 파일-새로만들기-문서를 선택합니다. · 문서설정 사이즈: 폭 90mm, 높이 50mm 페이지 수: (앞/뒤) 2 페이지 페이지 마주 보기: 체크해제 여백: 모두 3mm 배경 컬러가 있는 명함이라면 재단 선보다 2~3mm 여유 있게 만들어야 됩니다. 명함이 만들어지는 과정을 살펴보면, 인쇄 후 재단 시에 1mm의 오차가 발생할 수 있기 때문입니다. 그러면 아래와 같이 명함을 작성할 문서가 2페이지 나옵니다. 2. 명함 전면, 로고 붙이기 도구상자에서 그림상자를 클릭 후 로고를 붙일 영역을 드래그..
[상업용무료폰트] 배달의민족체 폰트 다운로드 오늘은 소개할 상업용 무료 폰트는 '배달의 민족 폰트'를 입니다. 제가 블로그 포스팅 첫 배너에 사용하는 폰트는 배달의 민족 도현체입니다. 배달의 민족 회사인 우아한 형제들에서 제약 없이 한글을 쓸 수 있도록 한나체·주아체·도현체·연성체·기랑해랑체·한나체 Air·한나체 Pro·을지 로체를 만들어 무료로 배포하고 있습니다. 대표적인 배달의 민족 폰트, 도현체/한나체/을지로체/주아체/연성체를 확인해 보겠습니다. 배달의 민족_도현체 제가 정말 애용하는 도현체는 옛 간판을 모티브로 한 서체이고 자음과 모음의 획이 서로 이어지는 것이 특징입니다. 도현체는 글자의 조합에 따라 형태가 달라집니다. 폰트 스타일이 군더더기 없이 깔끔하고 반듯하며, 가독성이 좋아 제가 제일 마음에 들어합니다. 배달의 민족_한나체 한나체는..
[일러스트] 블렌드툴 이용하여 긴그림자 글자 만들기(ft. 글자 그림자) 긴 그림자 글자를 일러스트를 활용하여 만드는 법입니다. 배너를 만들 때 텍스트를 이용한 디자인을 많이 하게 됩니다. 일러스트 글자 그림자 만들기 일러스트에 배너 사이즈의 사각형 툴을 만들고, 색상을 넣어줍니다. 원하는 텍스트를 넣어 글자를 디자인하세요. 제가 적용한 글꼴은 HY헤드라인M, 사이즈 70pt입니다. 마지막에 사용하기 위하여 텍스트를 복사하여 붙여 넣기 한 후, 텍스트 alt 드래그를 하여 대각선 아래에 위치시킵니다. 왼쪽 메뉴바 도구에서 blend tool을 선택합니다 상단 메뉴바에서는 object-blend-blend option을 선택합니다 Spacing: Specified Steps 클릭-200 수치 입력(설정한 간격에 200번 반복 설정)-ok 클릭 아래 텍스트 부분 클릭-대각선 아래..
[상업용무료폰트] 출판용서체 코펍체 (kopub돋음체, 바탕체) 다운로드 인쇄물에 사용할 무료 폰트, kopub돋음체, kopub바탕체를 소개합니다. kopub 돋음체, 바탕체란? 한국출판회의에서 전자출판용 서체용으로 개발하여 저작권을 가지고 있고, 무료 배포를 하고 있습니다. 한국출판인회의는 출판의 자유를 신장시키고, 출판의 문화적 진흥과 산업적 발전을 위해 민족문화의 창달에 기여함을 목적으로1998년 11월 2일 설립된 대한민국 문화체육관광부 소관의 사단법인입니다. 현재 명칭은 KoPubWorld 돋음체, KoPubWorld 바탕체입니다. 여기서 Kopub는 Korea Publishers(한국 출판인)의 약자입니다. kopub 돋음체 : 고딕체의 글꼴이고, 굵기에 따라 Light, Medium, Bold 3가지로 구분 주로 본문 내용에 사용 kopub 바탕체 : 명조체의 ..
[인디자인] 나만의 달력. 셀프 달력 만들기 요즘 학원을 통해 인디자인을 배우고 있는데, 오늘 배운, 알고 나면 나중에 쓸 일 있을 인디자인으로 만들어보는 달력! 나만의 달력을 만들어 봅니다. 현재 6월이기 때문에 6월 달력을 예제로 만들어 보겠습니다. 1. 문서 설정 ·새문서설정: 페이지수:12 페이지마주 보기체크해제 폭:210mm,높이:210mm 여백:전체10mm ·설정 후 아래와 같이 새 문서를 만듭니다. 2. 페이지 패널에서 마스터 선택하여 꾸미기 ·페이지 패널에서 A-마스터를 선택(더블클릭) 3. 마스터 페이지를 이용하여 월(Month) 꾸미기 이제 마스터에 달력을 작업해 봅니다. ·문자 삽입을 위하여 T 클릭하고 드래그 드롭하여 달을 입력할 곳의 영역을 잡아줍니다. ·메뉴의 문자-특수 문자 삽입-표시자-다음 페이지 번호(X)를 클릭 · ..
[인디자인] 영문판에서 한글판으로 변경하기(ft. cs6와 cc 비교) 인디자인에서 영문판에서 한글판으로 언어 변경하는 방법입니다. 포토샵과 일러스트레이터는 영문판을 주로 사용했기 때문에 디자인도 영문판으로 사용해야 하는게 아닐까 라고 생각하는 경우가 많은것 같습니다. 하지만 국내에서는 영문보다는 국문 편집을 할 상황이 많기 때문에 한글 편집에 필요한 기능(세로 쓰기, 문자 회전, 자간 세트, 합성 글꼴, 루비, 할주 등)을 제공하는한글판을 사용하는 걸 추천합니다. 이 기능들은 영문판에서는 사용할 수 없기 때문입니다. 또한 한글 폰트명이 영문으로 표기되고 영문이 우선 순위로 배치되어 한글을 편집하기에 한글판보다 불편한 점이 많습니다. 한자를 읽는 방법을 표기하는 루비나 중요한 글자를 강조하는 권점, 주석이나 보충설명을 2줄로 쉽게 표기할 수 있는 할주 등의 기능 또한 한글판..
색상추출 색상조합 컬러추천 무료 사이트 추천 색상추출/색상조합 사이트를 추천합니다. 디자인 작업을 하다 보면 COLOR의 중요성을 아주 많이 느끼게 됩니다. 예쁜 색, 어울리는 컬러를 고르거나, 컬러 조합이 필요할 경우가 많은데, 색알못인 저는 이럴 때마다컬러 선택에 어려움을 겪습니다. 컬러리스트는 자격증이 왜 나왔는지 이해가 됩니다. 심지어 자격증 취득이 쉽지 않다고 합니다! 저는 컬러 선택을 해야할 순간마다 매번 사이트에서 도움을 받는데요. 1. Adobe Color https://color.adobe.com/ko/create/ https://color.adobe.com/ko/create/ color.adobe.com 대중적으로 매우 유명한 컬러 조합 사이트 어도비 컬러입니다. #로 시작하는 헥스 색상 코드를 직접 입력하고 왼쪽 상단 유사/단색..
반응형

티스토리툴바