소이정이 자체 기획한 뉴스레터 콘텐츠로 실무 노하우, 마케팅/디자인 트렌드 등의 유용한 정보를 전합니다.

활용하기 좋은 아이콘 사이트

안녕하세요. 디자인소이정입니다. 오늘은 PPT나 웹디자인 등 다양하게 활용하기 좋은 아이콘 사이트를 모아보았습니다.아이콘은 SNS 심볼같이 말하지 않아도 알 수 있는 것을 이용해상대방으로 하여금 바로 이해할 수 있게 도와주거나 이런 직관적인 아이콘을 이용해 말하고자 하는 바를 더욱 강력하게 전달할 수 있어요. flaticon flaticon은 다양한 PPT 아이콘과 무료 픽토그램, 벡터그래픽 리소스를 제공하는 사이트인데요. 아이콘 사용시 저작권만 표시하면 문제없이 사용 가능하답니다. 상단에 필터기능과 카테고리 기능으로 원하는 아이콘을 손쉽게 다운 받을 수 있는 사이트입니다.직접 사용해보니, 한국어 검색보단 영단어로 검색했을 때 결과가 더 잘 나왔답니다!구글, 페이스북, 이메일 계정들으로 간단하게 로그인이 가능합니다. flaticon에서는 움직이는 아이콘도 다운 받을 수 있는데요. 메인 페이지에서 Animated Icons를 누르면 확인가능합니다. ▼ animated icon 예시 ▼ https://www.flaticon.com/ Free Icons and Stickers - Millions of images to download Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats www.flaticon.com lordicon 다양한 아이콘과 움직이는 아이콘을 보유한 사이트인데요. 마찬가지로 무료 사이트이며 종류도 다양하게 있습니다. html형식

SVG란 무엇인가

안녕하세요, 소이정입니다. 오늘은 svg에 관해 소개 드리려고 합니다.디자인 관련 업무를 하고 계시는 분들은 익숙할 수도 있는데,많이 접해보지 않은 분들에겐 낯선 단어일 수도 있을 것 같아요.살짝 말씀드리자면, png나 JPG의 경우는 비트맵 기반의 이미지이지만, SVG는 벡터 기반인 이미지인데요!비트맵과 벡터가 무엇인지 헷갈리신다면 먼저 아래 포스팅을 확인해 주세요! https://blog.naver.com/design_soijeong/223112450566 비트맵과 벡터의 차이점 안녕하세요, 소이정입니다! 여러분은 포토샵과 일러스트레이션을 왜 같이 사용하는지 아시나요? 왜 그림을 ... blog.naver.com 그럼 이제 svg가 무엇인지, 어떻게 사용하는지, 장단점은 무엇인지 한 번 알아볼게요! SVG의 정의 Scalable Vector Graphics의 약자로 이미지 포맷 방식 중 하나입니다. 여기서 Scalable이라는 단어의 의미에 조금 집중을 해야 하는데요, 이미지 크기를 늘리거나 줄이더라도 화질에 영향을 받지 않는다는 의미입니다. 즉, svg파일은 이미지 크기를 아무리 조정해도 화질의 변화가 없답니다!벡터로 이루어져 있기도 하며, xml* 문법으로 이루어진 소스이기 때문에 웹문서 안에서도 소스코드 형태로 삽입이 가능합니다. * XML : 인터넷 웹페이지를 만드는 HTML을 획기적으로 개선하여 만든 언어이다. 홈페이지 구축 기능, 검색 기능 등이 향상되었고, 웹 페이지의 추가와 작성이 편리해졌다. SVG의 역사 SVG는 1990년대 후반에 시작됩니다. 당시 월드 와이드 웹 컨소시엄(W3C*)에서

포토샵 텍스트를 이미지로 변환하기

안녕하세요 소이정입니다. 오늘은 포토샵에서 텍스트를 이미지로 변환하는 방법을 알려드리겠습니다.텍스트는 텍스트 자체만으로도 많은 효과를 가질 수 있지만 문자로서가 아닌그림과 같은 효과를 얻기 위해 텍스트를 이미지를 바꾸기도 합니다.또한 텍스트를 이미지로 바꾸는 작업이 필요한 이유는 다양한 서체때문인데요.포토샵을 불러올 때 이런 경험 한번쯤 있지 않으셨나요? 글꼴이 호환이 되지않는다는 경고창이 뜨면해당 폰트를 다운받아서 쓰거나, 다른 폰트로 교체해야해요.그런데 만약 절대 변경되서는 안되는 텍스트가 있다면?텍스트를 이미지로 바꾸어서 수정이 될 수 없게 할 수 있어요.수정이 되지 않으니 꼭 확정된 문구만 작업하시길 바라요! 0. 포토샵 새프로젝트 생성 제일 먼저 포토샵을 켜고 새프로젝트를 생성해줍니다. 크기는 상관없으며, 저는 오늘 배경으로 가져온 이미지가 1080*1080사이즈라 그에 맞춰서 생성해볼게요. 1. 사진 불러오기 제일 먼저 배경이 될 사진을 불러옵니다. 그리고 좀 더 어두운 배경을 만들고 싶어 불투명도를 준 검은색 정사각형을 배경위에 올려줬어요. 이부분은 선택사항이니 여러분이 원하는 분위기에 맞추어 진행해주시면 되겠습니다! 2.텍스트 입력 및 수정하기 텍스트를 입력합니다. 저는 우주 관련 이미지를 가져왔기 때문에 우주 관련 명언을 함께 준비해서 작성했어요. 텍스트 수정은 화면 상단의 텍스트바에서 하거나 오른쪽 텍스트 속성 탭에서 분위기에 맞는 폰트를 적용하고 크기, 색상을 수정해주세요. 3. 텍스트 이미지화 (문자 레스터화) 텍스트 레이어에 마우스 오른쪽을 클릭한 후 문자 레스터화를 설정해주세요. (영

디자이너를 위한 상업용 무료 폰트

안녕하세요. 소이정입니다. 요즘에는 배민체, 티몬체 등..기업에서 무료로 배포하는 폰트가 자주 등장하면서 디자이너들이 활용하기 좋아진 것 같아요.저도 카드 뉴스나 동영상을 제작할 때 상업용 무료 폰트를 자주 사용하곤 하는데요.그중에서도 손글씨 느낌을 내고 싶을 때 주로 여러분은 어떤 사이트를 사용하시나요? 저는 귀여운 느낌이나 손으로 쓴 것 같은 느낌을 내고 싶을 때 손글씨 느낌이 나는폰트를 많이 사용하는데요. 그래서 준비했습니다.직접 쓴 손글씨 같은 폰트를 잔뜩 모아둔 사이트!그중에서도 상업적으로 사용할 때 거의 무리 없는 무료 폰트를 모아보았습니다.그러나 항상! 라이선스는 홈페이지에 들어가 자세히 확인해 보아야 한다는 점!명심하세요~ 어비 폰트 어비 폰트는 손글씨의 끝판왕이라고 볼 수 있는데요. 100개가 넘는 손글씨 폰트를 확인할 수 있습니다.사이트에 들어가면 첫 메인 화면에 폰트 사용에 관한 안내가 나와있는데요. 상업적 용도도 무료, 폰트 변형 사용도 무료라고 하네요!인쇄, 교육용, 이모티콘, 로고, 인터넷 등 모든 곳에서 무료로 사용이 가능해요. 어비 폰트를 가공하여 apk, webFont 등의 모든 변환 결과물은 무료로 제공해야 합니다. 유료 판매 및 조건부 교환은 법적 책임을 물어야 하니 조심해 주세요! 어비 폰트는 사이트에서 가나다순을 폰트를 다운로드할 수 있도록 되어있어요.아래 보이는 것처럼 원하는 폰트 옆 바로 가기를 통해 파일을 받을 수 있습니다. 본인이 원하는 텍스트로 테스트도 가능한데요. 원하는 폰트에 바로 가기를 눌러 확인이 가능합니다. 몇 가지 폰트만 보여드렸는데, 손글씨가 너무 귀

TTF와 OTF의 차이

안녕하세요 소이정입니다.디자인 관련 업계에 종사하는 분들이나, 학교를 다니면서 PPT를 만드는 분이나 다른 과제나 과업을 진행하면서 온라인이나 소프트웨어를 통해 다양한 폰트를 다운로드 받아 사용해보셨을 거 같은데요.해당 폰트를 다운받다보면 ttf로 끝나는 파일, otf로 끝나는 파일을 보셨을 거 같아요.여러분은 이차이를 알고 계신가요?저는 처음엔 잘 모르고 그냥 다 다운받았는데요ㅎㅎ,,ㅎㅎ 저같은 부분이 있는 분들이 있을 거 같아 준비했습니다. TTF와 OTF의 차이점!한 번 알아볼까요? TTF란? TTF란 True Type Font의 약자로, 비트맵을 기반으로 이루어져있는데요.Apple과 Microsoft에서 공동 개발을 진행했으며, Apple의 OS와 Windows 호환 가능성을 고려하여 제작되었습니다. 일반적으로 가장 많이 쓰이는 형식이며, 용량이 작아 저장공간을 크게 차지않다는 점이 장점이기도 합니다. 비트맵의 형식이다 보니 확대를 하면 깨지게 보일 수도 있어, 퀄리티가 높지 않아도 되는 문서를 작업할 때 주로 활용하는 것이 좋습니다. OTF란? OTF는 Open Type Font의 약자로, 벡터 기반으로 이루어져있습니다.Adobe와 MicroSoft에서 공동 개발을 진행한 폰트 형식입니다. 그래서 Adobe와도 호환이 잘된다는 장점이 있습니다. TTF에 비하면 더 나은 기능, 성능, 보안성, 확장성을 제공합니다.OTF는 벡터기반의 형식이라 고해상도가 필요한 인쇄물과 웹용에는 해당 확장자의 파일을 사용하는 것이 좋습니다. 하지만 OTF형식은 글자를 매우 작게 표현하면 가독성이 떨어진다는 단점이 있습니다

포토샵 펜 도구로 누끼따기

안녕하세요. 소이정입니다. 저희 회사는 디자인회사라서 동료들이 누끼따고 있는 모습을 자주 목격할 수 있는데요.슬쩍 바라보니 펜 툴로 따고 계시더라구요.직접 물어보니 섬세하게 딸 때는 펜 툴로 하는 것이 좋다고...!그래서 저도 함 따라 해봤습니다.여러분들도 같이 펜 도구로 누끼따는 법을 배워보아요. 기본적인 펜툴 사용 방법 기본적인 펜툴 사용방법인데요.- 직선은 지점을 클릭하면 바로 만들어집니다. - 곡선은 지점에서 클릭하면서 드래그하면 방향선이 생기면서 곡선이 생깁니다. - 방향선이 있으면 곡선이 만들어지고, 방향선이 길어지면 곡선의 경사각이 커집니다.- 방향점으로 곡선의 모양을 조절할 수 있습니다.- Alt를 누른 상태에서 점을 클릭하면 방향선이 사라지고 직선을 그을 수 있습니다. 텍스트 만으로는 이해가 안 갈 수 있는데요, 직접 해보시면 쉬울 거예요! 1. 파일 불러오기 작업할 파일을 불러옵니다. 저는 제가 찍은 사진을 가져왔어요. 뒤에 트리 때문에 배경이 지저분해서 마법 봉으로는 누끼영역을 지정할 수 없겠네요 ㅠㅠ한 땀 한 땀 따기 위해 원하는 부분을 확대해 주세요. Alt를 누른 채로 마우스 휠을 움직이면 확대/축소됩니다. 2. 펜 도구 선택하기 화면 좌측에 있는 메뉴에서 펜 모양 아이콘을 클릭해 주세요. 그다음 상단에 있는 메뉴 바에서 pick tool mode를 패스로 지정해 주세요. 3. 전체적으로 누끼따기 이제 펜 툴로 누끼를 따면 되는데요 엄청 자세하게는 아니더라도 윤곽을 지정해 주세요. 파란 선이 제가 펜 툴로 딴 누끼 패스선입니다. 패스선을 그릴 때 이미지 안쪽으로 그리면 더 깔끔한 이미

포토샵 텍스트 그라데이션 넣기

안녕하세요. 소이정입니다. 오늘은 그라데이션을 텍스트에 입히는 텍스트 그라데이션에 대해 공부해 보겠습니다.지난번에 배웠던 클리핑 마스크 기능을 활용하면 되는데요.기억이 안 나신다면 이리로 ▼▼ 포토샵 클리핑 마스크 이용하기 [BY 소이정] 안녕하세요, 소이정입니다!.오늘은 포토샵 클리핑 마스크를 알아보겠습니다. 저번 강좌인 ... post.naver.com 텍스트에 그라데이션을 주면 강조 효과를 줄 수 있고,배경과 동일한 색상을 사용하여 전체적으로 잘 어우러지게 할 수도 있어요.간단한 예시로 한번 배워봅시다! 0. 포토샵 켜고 새 프로젝트 생성하기 제일 먼저 포토샵을 켜고 새 프로젝트를 생성합니다. 단축키로는 Ctrl+N입니다. 크기는 상관없습니다! 어차피 연습용이니까요~ 저는 1080*1080으로 설정했답니다! 1. 텍스트 입력하기 연습할 텍스트를 입력해 주세요. 텍스트는 단축키 T, 혹은 좌측 툴바에서 T 아이콘을 누르면 됩니다. 2. 그레이디언트 도구 텍스트를 다 적었으면 그레이디언트로 도구를 바꿔주세요. 페이트 통 도구를 꾸욱 누르면 ①그레이디언트 도구가 나와요. 그 후에 ②그레이디언트 편집기를 열어주세요. 그레이디언트 편집기를 열면 그라데이션 색을 수정할 수가 있어요. 먼저 색상을 ①바꿀 지점을 클릭하고 ②색상을 더블클릭해 주세요.②색상을 더블클릭해도 색상 피커가 나오지만, ①바꿀 지점에 있는 작은 색상 박스를 더블클릭해도 색상 피커는 똑같이 열리니 편하신 방법으로 사용해 주세요. 색상 피커가 나오면 색상을 지정할 수 있어요. 저는 우선 시작 지점을 핑크색으로 끝 지점은 파란색으로 했어요. 그

유튜브 계정 만들기

안녕하세요, 소이정입니다.요즘 SNS 마케팅에 가장 중요한 채널로 인식되고 있는 곳이 어디인지 아시나요?! 바로 유튜브입니다.과거에는 궁금한 것이 있으면 당연히 포털 사이트에서 검색을 했었는데요, 요즘 10대들은 포털이 아닌 유튜브에서 검색을 한다고 합니다. 그만큼 활성화되는 채널이 이동했다는 것으로 해석할 수 있는데요.최근 2023년 5월 모바일인덱스에서 제공한 통계자료에 따르면 우리나라에서 유튜브 앱을 한 달에 한 번이상 이용한 사람이 카카오톡 앱 이용자 수에 육박한다는 자료가 공개됐는데요. 월간 총 사용 시간 기준으로는 이미 유튜브가 압도적으로 높다고 합니다. 2022년 유튜브 이용시간 통계 [출처 - 모바일 인덱스] 1. 구글 로그인 후 채널 만들기 제일 먼저 구글 아이디로 유튜브에 로그인 후 채널을 만들어보도록 하겠습니다. 우측상단에 있는 동그라미 프로필 사진을 클릭해 주세요. 그럼 아래와 같이 팝업이 표시되는데요, 여기에서 채널만들기를 클릭해주세요. 그 다음 원하는 프로필 사진, 이름, 핸들*을 입력 후 채널을 만들어줍니다.* 핸들이란, 크리에이터를 찾아서 소통할 수 있는 수단으로, 채널 이름과는 별개로 구별되는 짧은 식별자입니다. 기존에는 유튜브 채널명이 중복되는 경우가 있어 채널명만으로는 중복을 구분하기 어려웠는데요. 이를 방지하기 위해 계정마다 고유한 닉네임 혹은 아이디를 부여할 수 있는 항목입니다. 2. 채널 맞춤 설명 넣기 내 채널에 들어오면 텅텅 빈 화면이 나올 거예요. 이제부터 하나하나 채워보도록 할게요!상단에 있는 채널 맞춤 설정을 클릭해 주세요. 그럼 Youtube Studio와 연

도메인 알아보기

안녕하세요! 소이정입니다.홈페이지를 제작할 때에는 도메인을 등록이 필수적인데요.여러분은 도메인에 대해 알고 계시나요?한 번쯤은 대화를 하다 이런 경험이 있으실 것 같은데요. 그... 거기 사이트 주소가 뭐더라? 초록창있잖아!!그거 naver.com이잖아~ 이때의 인터넷 주소 = 도메인이라고 생각하시면 되겠습니다!그럼 도메인은 왜 필요한지, 그렇다면 도메인은 왜 구매해야 하는지, 구매해야 하면 어느 사이트에서 구매가 가능한지!한번 알아보도록 할게요! 도메인 [domain] [요약] 숫자로 이루어진 인터넷상의 컴퓨터 주소를 알기 쉬운 영문으로 표현한 것을 말한다. 시스템, 조직, 조직의 종류, 국가 이름순으로 구분된다. 출처 : 네이버 지식백과, 두산백과 도메인은 숫자로 이루어진 인터넷상의 컴퓨터 주소를알기 쉬운 영문으로 표현한 것을 말하는데요.시스템, 조직, 조직의 종류, 국가 이름순으로 구분됩니다.즉,웹사이트에 방문하기 위해 브라우저에 입력하는 주소를 의미합니다.웹사이트들은 지문처럼 각각의 고유한 도메인명을 가지고 있으며,다른 웹사이트와 중복되는 도메인은 사용할 수 없습니다. 소이정에서도 다양한 홈페이지를 제작하다 보니, 도메인과 관련해서는 떼려야 뗄 수 없는 사이인데요. 이렇게 도메인이 중요한 이유가 무엇인지 한 번 알아볼까요! 도메인이 중요한 이유 1. 짧은 도메인 내에 숨어있는 나의 브랜드2. 웹사이트 상단에 계속 고정되어 웹사이트 각인간단하게는 위의 두 가지 이유입니다. 간단하죠! 결국 사람들에게 나의 사이트와 브랜드를 각인시키고자라고 생각하면 편합니다.예시를 들어보면, 네이버나 구글 등 다양한

포토샵 색상 모드 활용하기

안녕하세요. 소이정입니다. 오늘은 포토샵에서 색상 모드를 활용해서색 보정을 하는 방법을 말씀드리려고 합니다.바로 알아보러 가시죠~! 색상 모드 종류 제일 먼저 알고 가야 하는 사실! 1. 포토샵 이미지 색상 모드 : 메뉴바 이미지(Image) > 모드(Mode)로 가면 설정할 수 있습니다.2. 8bits / 16bits / 32bits : 비트가 높아질수록 색상의 표현과 용량이 높아집니다.일반적으로 8bits를 많이 사용하며, 16bits 이상의 경우 인간의 시각으로 차이를 느끼기가힘들어 잘 사용하지 않습니다. 회색 음영 8비트 컬러인 256색상의 블랙 채널 하나로 구성되어 있는 회색 음영은 흑백으로 표현할 때 사용하는데요. 회색 음영 모드를 거쳐야지만 비트맵과 이중톤 모드를 설정할 수 있습니다. 사진 출처 : freepik 비트맵 이미지를 흰색과 검은색만 사용해 이미지의 픽셀을 표현하는 모드입니다. 용량이 작게 설정이 되며, 비트맵 모드의 이미지는 비트 심도가 1이기 때문에 1비트 비트맵이라고도 불린다고 합니다. 위에서 언급했듯, 회색 음영 모드로 변환한 후에 사용 가능합니다. 이중톤 흑백 이미지에 한 개 이상의 색감을 더 얹는 것을 뜻합니다. 저는 삼중톤을 입력해서 모드를 이용해 봤는데요, 유형을 클릭해 보면 단일톤(1색), 이중톤(2색), 삼중톤(3색), 사중톤(4색)까지 있습니다. 원하는 톤 개수에 맞추어 회색 음영 이미지를 만들 수 있습니다. 잉크 색상은 미리 보기를 통해 확인할 수 있습니다. 인덱스 인덱스 모드는 최대 256가지의 색을 사용해 8비트 이미지 파일을 만드는데요. 색상 수가 256