반응형 Design10 [프리미어] 영상 프레임 크기 조정하기 (시퀀스 종횡비 변경) 가로로 찍은 영상을 세로 형식(릴스 / 숏츠)으로 변경하고 싶은 경우가 있을 때 사용할 수 있는 방법입니다. 상단 메뉴에서 시퀀스 > 시퀀스 설정을 클릭합니다. 프레임 크기에 가로 세로 크기를 변경해준 뒤 확인을 눌러줍니다. 화면 비율은 1.91:1~9:16 로 설정 할 수 있습니다. 저는 9:16 비율이 적당할 것 같아 다음과 같이 입력해주었습니다. (1080 / 1920) 확인을 누르면 미리보기에 세로 프레임으로 화면이 변경된 것을 볼 수 있습니다. 2023. 8. 23. [UX/UI]스파르타 React 디자이너 챌린지 1등 후기 한 달 동안 스파르타 React 4기 디자이너 팀원으로 참여해서 프로젝트를 진행했다. 하는 과정도 즐겁고, 의미있고, 배우는 것도 있었는데, 1등이란 성과도 얻고 좋은 피드백도 얻어서 기록하고 싶어 남긴다. 한 달 동안 프로젝트 한다고 날 새는 날도 종종 있었고, 힘든 점도 있었지만 좋은 성과가 나서 기쁘다. 디자인에 있어서도 아래와 같이 전략적으로 접근했는데, 그게 생각과 같이 잘 됐던 것 같다. (물론 나보다 개발팀의 덕이 크다. 나는 그냥 숟가락을 올렸다.) 1) 디자인 프로젝트가 아닌 개발 프로젝트라는 점에 집중해서, 최대한 개발 역량을 많이 보여줄 수 있는 ui 디자인을 한다. (반응형 등) 2) 위와 같은 맥락으로 실험적인 디자인보다, 정석적인 디자인으로 접근한다. 3) 기간 산정에 있어서 디.. 2023. 3. 18. [Three.js 설치]웹에서 3D 구현하기 Three.js란? three.js는 웹페이지에 3d객체를 렌더링하도록 도와주는 자바스크릡트 라이브러리입니다. 웹사이트를 인터렉티브하게 표현할 수 있는 기술이며, 3D툴을 사용하실 수 있다면 활용하면 좋은 라이브러리입니다. https://threejs.org/ Three.js – JavaScript 3D Library threejs.org Boilerplate로 three.js 설치하기 1) Node.js 설치 npm은 명령어를 통해 자바 스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저입니다. npm으로 three.js를 설치하기 위해 먼저 아래 링크에서 node.js를 다운로드 해줍니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript r.. 2023. 2. 17. 내가 보려고 정리하는 웹 / 모바일 디자인 레퍼런스 사이트 웹 디자인 1. 디비컷 https://www.dbcut.com/ 디비컷 - 웹디자인 평가 및 우수 웹사이트 모음 국내외 우수 웹디자인 레퍼런스 사이트 www.dbcut.com 국내외 웹디자인 레퍼런스 사이트입니다. 회원가입을 해야 큰 이미지로 볼 수 있다는 단점이 있으나, 워드프레스 카테고리를 통해 인터렉션 및 실제 웹 구현 기능을 확인할 수 있어 개발에 있어 용이하게 사용할 수 있습니다. 2. CSS Design Awards https://www.cssdesignawards.com/ CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards AWARDED 2023 FEB 10 Design, engineering, marke.. 2023. 2. 10. 웹 디자인 기본 용어 GNB(Global Navigation Bar) : 웹 대표 메뉴 (대분류) LNB(Local Navigation Bar) : GNB의 하위 메뉴 (중분류 / 소분류) CTA (Call to Action) : 목표 달성 버튼 라벨 (Label) : 인풋창 옆 소게 플레이스홀더 (placeholder) : 인풋창에 입력할 힌트를 주는 내용 인풋창, 입력 필드 (input Field, Text box) : 입력할 때 사용하는 창 파비콘(Favicon) : 상단 브라우저 탭 타이틀 옆 16*16 아이콘 사이드바 (aside) : 콘텐츠 영역 제외 좌측 혹은 우측에 배치된 영역, 반응형에 취약 헤더 (header) : 상단 영역 푸터 (Footer) : 하단 영역 레이아웃 (Layout) : 화면 구성 / 배치.. 2023. 2. 8. 일러스트 고화질로 저장하는 세 가지 방법 일러스트 고화질 저장 방법 디자이너들의 고충 중 하나는 단연 화질문제일 텐데요. 벡터 파일을 고화질로 저장하는 방법은 여러가지가 있습니다. 오늘은 일러스트 파일을 내보내는 세 가지 소개해보도록 하겠습니다. 1. 파일(F) > 내보내기 > 화면에 맞게 내보내기 저장하고자 하는 템플릿에서 파일 > 내보내기 > 화면에 맞게 내보내기를 클릭해줍니다. 단축키는 Ctrl + Alt + E 입니다. 크기 조절 선택 내보내고자 하는 대지를 선택 후, 크기조절에서 3X 혹은 4X를 선택합니다. 높을 수록 고화질입니다. 2. 파일 > 내보내기 > 웹용으로 저장 또 다른 방법은 파일 > 내보내기 > 웹용으로 저장에서 내보내기를 하는 방법입니다. 단축키는 Alt+Shift+Ctrl+S 입니다. JPEG인 경우 최대 품질, 1.. 2022. 7. 4. NOTION 포트폴리오 Third party tool/ 템플릿 추천 최근들어 노션으로 포트폴리오와 이력서를 제출하는 경우가 많아지고 있습니다. 이에 따라 노션 템플릿을 제공하거나 아이디어를 확장시키는 Third party tool도 다양하게 제공되고 있는데요. 저도 포트폴리오와 이력서를 노션으로 작성해보고자 관련 도움이 되는 여러 사이트를 찾아보았습니다. 노션 템플릿 갤러리 https://www.notion.so/1639712845e5473083442d3ff3be023c 템플릿 갤러리 Notion 한국 커뮤니티가 만든 템플릿 ✨ www.notion.so 노션에서 제공하고 있는 다양한 템플릿을 활용할 수 있는 페이지입니다. 직접적인 포트폴리오 템플릿은 제공하고 있지 않지만, 노션에서 제공하는 다양한 기능들을 적극 활용한 기본템과 같은 느낌입니다. 포트폴리오에 복사해서 활용.. 2022. 6. 29. [Spline] 입문하기 쉬운 3D 툴 스플라인 프로덕트 디자이너를 위한 3D툴 SPLINE 회사 업무로 앱스토어 이미지 만들기 위해서 목업 파일 찾다가 3D툴 SPLINE을 접하게 되었습니다. 반나절정도 사용해보니 툴 자체의 기능 사용법이 쉽고 간편해 업무에 있어서도 활용도가 높을 것 같아서, 추천드리고자 간단한 리뷰를 쓰게 되었습니다. https://spline.design/ Spline - Design tool for 3D web browser experiences Create web-based 3D browser experiences spline.design 간단한 SPLINE 사용법 리뷰 ALT + 마우스 드래그로 화면 각도를 전환할 수 있습니다. 상단 가운데에 있는 +를 클릭하여 오브젝트를 추가할 수 있습니다. 추가된 오브젝트에 자동으로 생.. 2022. 6. 28. 디자이너들이 참고하기 좋은 디자인 영감 사이트 모음 1. 핀터레스트 이미 많이 알려져셔 유명한 사이트이다. 주변 Behance 이후로 주춤하다는 평이 있지만, 그럼에도 여전히 다양한 디자인 소스 아이디어를 발굴하는 데 있어 도움을 주는 사이트이다. https://www.pinterest.co.kr/ Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.pinterest.co.kr 2. Behance 디자이너라면 알고 있을 사이트이다. 직접 자신이 제작한 작업물을 올려 포트폴리오로도 활용이 가능하다. https://www.behance.net/ Search Projects | Photos, videos, logos, illustrations and branding on Behance w.. 2022. 4. 7. 이전 1 2 다음 반응형
