728x90 Graphics10 로딩 이미지 생성 사이트 - loading.io 살다 보면 로더 이미지 파일이 필요할 수 있잖아요 그럴 때 유용한 사이트 https://loading.io/ FREE라고 표시된 부분의 로더들은 색이나 바 크기, 스피드 등을 원하는 대로 커스텀하여 GIF, SVG, PNG 파일 등으로 저장이 가능합니다. 심지어는 CSS파일도 제공합니다. 이렇게 CSS를 포함한 html 파일 형태로 저장이 가능합니다. 다운로드를 클릭하면 나오는 아래의 화면에서 Free Download를 클릭하면 다운로드가 됩니다. 다운받은 SVG 파일 참 쉽죠? 2023. 10. 18. Figma에서 같은 폰트 스타일이 적용된 텍스트 찾기 (특정 스타일이 적용된 요소 전체 검색) - Same Text Style Finder 유용한 협업툴 Figma 시안 전체 중에 특정 폰트가 어디에 얼마나 들어가 있는지 찾아야 할 때 피그마 플러그인 Same Text Style Finder를 통해 특정 text style이 적용된 요소를 레이어 하나하나 볼 필요 없이 한 번에 검색할 수 있다. 좌측 상단의 파란 메뉴에서 Plugins -> Manage plugins를 클릭한다. 검색창에 Same Text Style Finder를 입력하고 이 플러그인을 클릭해 실행해 준다. 그러면 이렇게 Plugins에 Same text style finder가 추가가 된다. 이 플러그인을 실행하면 아래와 같은 창이 나타난다. 첫번째 셀렉트박스를 클릭하면 현재 프로젝트 내에 사용된 폰트들을 확인할 수 있다. font family, font weight, f.. 2023. 10. 6. 상업용 무료 폰트 롯데웰푸드 '시원한 설레임체' 추천 롯데제과 아니아니 롯데웰푸드의 고딕 서체 이름하여 '시원한 설레임체'이다. 익숙한듯하면서도 트임이 있어 특이한 느낌을 준다. 시원한 설레임체 사용범위👇 CI/BI나 패키지 인쇄에는 사용이 불가하다. 개인 SNS, 개인 UCC 등으로 표기된 걸 보면 회사에서 상업적으로 사용하는 건 잘 따져봐야 할 듯 시원한 설레임체 다운로드 링크 2023. 4. 21. 상업용 무료 폰트 'KBO 다이아고딕' 추천 KBO에서 만든 고딕 KBO 다이아고딕이다. 공개된 지 얼마 안 된 새 폰트! 지금 본문 폰트가 KBO 다이아고딕이다. 웹폰트 컨버터를 사용하여 웹폰트로 만들어 본문에 적용하였다. (모바일에서는 적용 안됨) KBO 홈페이지에서 직접 써보고 다운로드할 수 있다. Light는 에스코어드림이랑 비슷한 느낌이다. 볼드는 느낌이 확 다름 헤더 폰트로 적당한 것 같다. 자주 사용하게 될 듯 뷁 탏 돚 봙 좤 컄 햫 뱗 댣 윦 햃 픓 걚 걚 챫 챺 궭 휅 뭵 !@#$%^&*()_+ 믓찌㉰💚 믓찌㉰❤ 우럭니ﾍ( ´Д`)ﾉ👩🏻믓찌㉰💚 믓찌㉰❤ 우럭니ﾍ( ´Д`)ﾉ👩🏻믓찌㉰💚 믓찌㉰❤ 우럭니ﾍ( ´Д`)ﾉ👩🏻믓찌㉰💚 믓찌㉰❤ 우럭니ﾍ( ´Д`)ﾉ👩🏻믓찌㉰💚 믓찌㉰❤ 우럭니ﾍ( ´Д`)ﾉ👩🏻믓찌㉰💚 믓찌㉰❤ 우럭니ﾍ( ´Д.. 2023. 4. 19. [Photoshop] GIF로 움직이는 PNG 파일(APNG) 만들기! PNG 이미지도 움직일 수 있다는 사실을 아시나요? 전 몰랐습니다ㅎ~ 알게된 기념으로 GIF로 PNG를 만들어 보았습니다. 1. 일단 포토샵에서 gif 이미지를 엽니다. 저는 카카오페이지에서 춘식이 움짤을 저장해서 사용했습니다. 2. 파일>내보내기>레이어를 파일로 순서대로 클릭합니다. 3. 아래와 같은 창이 뜨는데 필요에 따라 저장 경로와 접두어를 바꾸고 실행을 눌러줍니다. 4. 그러면 이렇게 GIF의 프레임들이 각각 png로 저장이 됩니다. 5. 이제 APNG를 만드는 사이트를 열어줍니다. 아래 사이트가 아니어도 APNG assembler/generator/maker 등을 검색하여 원하는 사이트에서 작업하면 됩니다. https://ezgif.com/apng-maker Online Animated PNG.. 2023. 4. 5. [Photoshop] 포토샵으로 여러 이미지 한 번에 크기 조절하기 / 포토샵으로 레이어 일괄 저장하기 포토샵으로 이미지 하나하나 사이즈 맞추고 크롭하기 귀찮을 때 쓰면 좋은 방법 스택으로 파일 불러오기 각각 크기가 다른 이미지를 한 번에 레이어로 불러와서 같은 사이즈로 조절할 수 있다. 이 방법이 자동 리사이징은 아니지만 그래도 일괄로 작업할 수 있으니 차선책정도는 되지 않을까 우선 리사이즈할 사진들을 한 폴더에 넣어줍니다. 포토샵을 열고 파일 > 스크립트 > 스택으로 파일 불러오기 찾아보기>아까 생성한 폴더 선택해서 전체선택(ctrl+A) > 열기 그러면 이렇게 한 파일에 레이어로 이미지들이 전부 불러와집니다. 가장 가로가 넓은 이미지 기준으로 캔버스 크기가 잡힘 파일마다 사이즈가 조금씩 다르게 형성되는데 캔버스에 맞게 각각 사이즈 조절(ctrl+t)을 해줍니다. 그리고 이미지 크기에서 원하는 해상도로.. 2023. 2. 24. 유용한 MIT라이센스 무료 아이콘 라이브러리 모음 1. Feather icons 사이즈와 두께, 색상을 커스터마이즈 가능하다는 장점이 있다. 웹 다크모드도 지원한다. https://feathericons.com/ Feather – Simply beautiful open source icons Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. feathericons.com 2. Heroicon 라인아이콘/솔리드아이콘이 나뉘어있어서 보기 편하다. https://heroicons.com/ Heroicons Beautiful.. 2022. 4. 2. 웹디자이너를 위한 목업(Mockup) 사이트 모음 웹디자이너라면 이래저래 이미지 목업을 해야할 일이 많다. 오늘은 목업 사이트를 추천해보려 한다. 1. https://www.shutterstock.com/ 벡터 목업도 얻을 수 있고 못보던 (흔하지 않은) 목업이 은근히 많다. 라이센스를 구매해야 하는 유료라는 것이 단점. 회사에서 셔터스톡 라이선스를 구독 중인 경우 추천하는 경로이다. 2. https://www.freemockupworld.com/ 너도 알고 나도 알고 모두가 아는 무료 목업 사이트. 감수해야 할 단점은 웹을 떠돌다 보면 종종 발견하는 익숙한 무료 목업의 향기..😂 3. https://www.mockupworld.co/all-mockups/ 너도 알고 나도 알고 모두가 아는 무료 목업 사이트 2 위의 사이트와 동일한 단점을 안고있다. 4.. 2022. 4. 1. 웹디자이너에게 도움이 되는 사이트 추천 (색감, 트렌드, 코딩 등) 웹디자이너들에게 도움이 될만한, 디자인 관련 유용한 사이트 몇가지를 소개하겠다. 📌 컬러 1. https://coolors.co/ 트렌딩 중인 컬러 팔레트 보기, 이미지에서 컬러 팔레트 생성, 이미지에서 색상 값 추출, 색상 대조값, 그라디언트 생성 등 색상 관련 다양하고 유용한 기능을 제공한다. 앱과 크롬 확장 프로그램으로도 만나볼 수 있다. 2. uigradients.com/ 그라디언트 참고용 사이트. 심플한 UI로 이용이 편리하다. 단점은 그라디언트가 아주 많지는 않다. 📌 웹디자인 공부 1. http://styleguide.co.kr/index.php 웹디자이너를 위한 웹스타일 가이드. 해상도, 아이콘, 타이포그래피 등 웹디자인의 기초적인 내용을 담고있다. 쉬워보이지만 가장 중요하고 놓치기 쉬운 .. 2022. 3. 31. 이전 1 2 다음 728x90
