그냥, 일단 써내려가자

오늘은 디자이너로써 북마크에 저장해 놓으면 좋을만한 이미지 사이트를 공유하려 합니다. 아래 사이트들은 출처 표기 없이 상업적 사용이 가능합니다.(2023-03-06 기준) 01. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 무료 이미지 찾을 때 가장 많이 사용한다고 할 정도로 많은 이미지들을 갖고 있고 해외 이미지들이 주이기 때문에 잘 사용하면 좋은 디자인을 만들 수 있습니다. 02. https://www.pexels.com/ko-kr/ 무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | P..

위 이미지처럼 라인을 따라서 텍스트가 쓰여진 디자인 보신 적 있으신가요? 오늘은 이 기능에 대해 써보려 합니다. 먼저 이미지와 비슷한 타원을 그리고 면은 제외하고 선만 살려줍니다. 그리고 'ctrl + 레이어 왼쪽 마우스 클릭'을 하면 해당 레이어 부분이 선택되면서 라인이 선택됩니다. 타원은 그대로 크기를 키우게 되면 본 형태 그대로 커지는 게 아니라 비율 변형이 생겨 다른 방법으로 크기를 늘려줘야 합니다. '선택 - 수정 - 확대'를 클릭해서 확대하려고 하는 픽셀 수만큼 입력해 줍니다. 저는 6픽셀을 설정했습니다. 그러면 픽셀수만큼 확대된 영역을 볼 수 있습니다. 영역이 선택된 상태에서 '패스 - 패스 만들기'를 하면 선택영역대로 패스가 생성이 됩니다. '텍스트' 툴을 선택하고 패스 근처에 마우스를 올..

실무를 하다 보면 디자인 소스를 가져와서 작업을 많이 하게 되는데 보통 화질 손실을 막고 편집을 편하게 하기 위해 고급개체로 가져오게 됩니다. 하지만 고급개체로 가져와서 작업하고 저장하면 파일 용량이 커지기도 하고, 클라이언트 측에 전달할 때 고급개체 상태로 전달하게 되면 클라이언트 측에서 사용할 수 있어서(라이센스 문제가 발생) 고급개체는 레스터화해서 관리하는 게 좋습니다. 그래서 오늘은 빠르게 레스터화할 수 있는 단축키 설정을 알아보려 합니다. 01. '편집 - 바로 가기 키' 메뉴 선택 02. 레이어 항목 선택 03. 레스터화를 보면 바로 가기 키가 설정이 되어있지 않는 게 기본값입니다. 여기를 눌러서 본인이 사용하기 편한 키를 누르면 입력이 됩니다. 저는 'Ctrl+Alt+F'가 편하다고 생각해 ..

티스토리 블로그에 코드 블럭 스킨 적용하는 방법 (highlight.js) ?. 코드블럭이란 게시글에 코드를 넣을 때 최적화 시켜주는 툴이다. 여기서 여러가지 언어를 선택할 수 있다. 스킨을 사용하지 않으면 평범한 코드블럭 형태가 나온다. 하지만 평범한 스킨이 싫다 싶은 사람들은 코드 스킨을 사용하면 자신만의 블로그 색깔을 만들 수 있다. 아래 순서대로만 따라오면 쉽게 적용할 수 있다. 01. 블로그 설정에서 '플러그인 - 코드 문법 강조' 선택 02. 적용 클릭 03. '스킨 편집' 클릭하고 창 먼저 띄워두기 04. https://highlightjs.org/ highlight.js Version 10.7.2 This is a patch release. The only change is that dep..

원본 링크 : https://github.com/bfintal/Counter-Up GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becom Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible. - GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts u... github.com 사용 소스 : 01...

오늘도 웹서핑을 하다가 좋은 사이트를 발견하게 되었다. 바로 이미지맵 좌표를 편하게 찾아주는 사이트. 내가 아무것도 모르고 네이버 블로그스킨을 제작할 때는 포토샵에서 이미지맵을 직접 계산하느라 머리가 아팠다. 네이버 블로그스킨 특성상 이미지맵으로 링크를 넣어야하는데 알려주는 사수도 없었기 때문에 포토샵에서 가로값, 세로값, x좌표, y좌표 직접 수치 적어가면서 적용하곤 했는데 이렇게 좋은 사이트가 있었다면 그 때 덜 고생했을텐데.. 본론으로 들어가서 링크는 http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu 들어가면 아래 화면이 보인다. 1 : 파일 선택 2 : 파일 업로드 3 : 파일 허용 위 순서대로 하면..

2023년은 높은 채도의 네온 색상이 트렌드를 이루게된다고 한다. 그동안은 미니멀리즘을 지향하는 디자인이었다면 앞으로는 맥시멈리즘을 지향하는 디자인이 많이 나올 수 있다. 아래와 같은 네온 색상은 맥시멈리즘을 지향하는 요소 중 하나로 2023년의 디자인 트렌드가 될 수 있다. 네온 색상 디자인 레퍼런스 01. UE14 02. 식물성 03.soPSYety

웹 디자이너로 생활하면서 레퍼런스 찾는 작업을 많이 하는데 레퍼런스를 찾다 보면 아래와 같은 익숙하지 않은 디자인들이 가끔 보인다. 그래서 이런 디자인은 왜 나오는 건지 찾아보고 정리하고자 한다. 브루탈리즘은 20세기 초의 모더니즘 건축의 뒤를 이어 1950년대에서 1970년대 초반까지 융성했던 건축 양식이다.(위키백과) 브루탈리즘이란 용어의 의미가 '가공되지 않은 콘크리트'와 비슷한데 말 그대로 뭔가 정돈되지 않은 느낌과 날 것 그대로의 모습을 연상시킨다. 웹디자인으로 다시 돌아가보면 요즘 웹사이트들의 디자인은 비슷한 느낌이 많이 들고 평범한 웹사이트는 눈에 띄기 힘들어졌다. 그 와중에 네오브루탈리즘 디자인은 한번 경험하면 기존의 디자인과의 이질감 때문에 더 확실하게 사이트를 기억할 수 있다. 이 트렌..

아래 방법을 사용하면 간편하게 디자인 가이드를 수정할 수 있습니다. 처음 퍼블리싱을 접하시는 분들은 각각의 텍스트, 라인 등에 똑같은 스타일을 다 각각 스타일을 지정하는 작업을 할 수 있지만 아래처럼 변수로 스타일을 만들어놓으면 같은 형식의 디자인같은 경우 한 번에 색상 및 폰트 크기 등을 간편하게 변경하고 적용할 수 있습니다. 1.HTML 첫 번째 타이틀 첫 번째 서브 타이틀 예시용 텍스트 문단입니다. 두 번째 타이틀 두 번째 서브 타이틀 예시용 텍스트 문단입니다. 세 번째 타이틀 세 번째 서브 타이틀 예시용 텍스트 문단입니다. 2.CSS *{ pdding: 0; margin: 0; } /* 전체 설정 가이드화 */ :root{ --color-black: #131313; --color-gray: #55..

퇴사하고 이직을 준비하는 과정에서 문득 창작욕이 불타올라서 타자를 조금 두드려보려 합니다. 너무 오랜만의 글이라 어색한 느낌이 드네요😅 2021년 9월, 첫 회사를 정리하고 두 번째 회사를 다니게되었습니다. 경기도인 집에서 가까운 회사에서 서울의 회사로 이직을 성공했을 때의 기쁨은 어마어마했습니다. (우왓 드디어 나도 서울 생활 시작?!) 이직을 준비해서 들어간 게 아니라 이직제안을 받고 들어가게 되어서 기쁨은 두 배였습니다.🤩 뭣도 모르고 면접보고 합격해서 출근 날짜 정해지고 처음 출근하게 된 광고대행사.. 기업들에 대한 인사이트가 적었던 탓에 광고대행사의 업무라던가 나의 포지션 등에 대한 정보는 아무것도없던 상태.. 기쁜 마음으로 출근을 했습니다. 그런데 출근한지 보름만에 맞이 하게 된 혼자 이끌어가..