반응형

전체 글 44

[CSS] 배경 이미지가 크롭된 텍스트 스타일 만들기 CSS

배경이미지가 텍스트 컬러로 적용되는 크롭 스타일의 텍스트 디자인 적용 예제입니다. 텍스트를 많이 입력하여 스크롤이 생기면 백그라운드 이미지를 고정시켜{background-attachment:fixed;} 텍스트만 스크롤되는 패럴랙스 스타일로도 적용해볼 수 있습니다. People will throw stones at you. Don't throw them back. Collect them all and build an empire. VIEW DEMO

HTML&CSS 2021.06.09

[디자인트렌드] VOGUE ITALIA의 색다른 UX 가상 VR 갤러리 웹사이트 Life in VOGUE

Life in VOGUE 프로젝트는 2018년부터 오프라인 공간에서 디자인과 패션을 접목하여 진행된 복합 프로젝트 입니다. 올해는 비대면 전시를 위해 온라인상에 VR로 가상의 빌딩을 제작하여 아티스트의 공간 디자인 프로젝트를 소개하는 사이트를 오픈했는데, 차분하면서도 고급스러운 기조로 전개되는 UI와 함께 아티스트의 작품들을 층별로 전시하여 통상적인 가상 공간 전개 방식인 360도 영상이나 커다란 갤러리 공간에 전시된 작품을 감상하는 방식이 아닌 색다른 방법으로 풀어낸 부분이 인상적입니다. 가상의 빌딩을 인지시켜주는 예쁜 일러스트로 제작된 페이퍼북으로부터 시작하여 페이지를 넘기면 엘리베이터 문 팝업 페이지가 등장하여 층을 이동하는 버튼을 누를 수 있도록 화면이 연결됩니다. 전체 메뉴 UI를 엘리베이터의 ..

Design Trend 2021.05.25

[DESIGN] 유튜브 채널아트 쉽게 만드는 법 사이즈 가이드 (psd 파일 공유)

youtube channel art size guide 유튜브 채널아트를 디자인할 때 만들어야 할 여러가지 사이즈가 있죠? 다양한 브라우저 및 모바일 기기에서 잘 보여지도록 유튜브에서 가이드를 제공하고 있습니다. 이미지 크기 및 파일 가이드라인 업로드 최소 크기: 16:9 가로세로 비율의 2048x1152픽셀 텍스트 및 로고가 잘리지 않는 최소 크기: 1235x338픽셀 여기에서 벗어나는 부분은 특정 보기 설정 또는 기기에서 잘릴 수 있습니다. 파일 크기: 6MB 이하 더 쉽게 만들 수 있도록 가이드가 담긴 psd를 만들어 공유합니다. 유튜브 사이즈 가이드 psd 다운로드 가이드에 따라 제작하여 적용해보았습니다. 유튜브 사이즈 가이드 psd 파일 다운로드 이 글이 도움이 되었다면, 공감과 댓글 남겨주세요!

IT Tip 2020.09.14

[디자인트렌드] 명조체 Serif 스타일 웹사이트 11 - 웹디자인 트렌드 2020

멋진 명조체로 디자인된 웹사이트 11 을 소개합니다. Craig Reynolds 뉴욕 출신 Craig Reynolds 라는 디자이너의 포트폴리오 사이트로 마우스 오버 시 타이포 디자인 위로 이미지가 커서에 따라 움직이며 나타나는 효과가 인상적 입니다. 명조체와 이미지 페이드 효과가 분위기 있는 웹 디자인을 보여주고 있고, 타이틀 hover 시 해당하는 콘텐츠를 이미지로 보여주어 더욱 직관적입니다. Marvin Schwaibold 디자이너의 포트폴리오 사이트입니다. 포트폴리오의 썸네일, 상징적인 이미지와 함께 잘 보여주고 있습니다. 정형화된 레이아웃이 아닌 스크롤 인터랙션으로 이미지가 등장하는 방식이 자유로움을 느끼게 해줍니다. 특정 아이콘을 로고화하여 표현한 점이 눈여겨볼만 합니다. reiter-fris..

Design Trend 2020.08.27

[풀스택디자이너] SVG 변환이 필요없는 아이콘 무료 사이트 feather (feat. Adobe XD에서 적용하기)

웹에 최적화된 이미지 파일 유형인 .svg 아이콘을 무료로 다운로드 할 수 있는 사이트를 소개합니다. feather https://feathericons.com/ 지속적으로 새로운 아이콘을 업데이트하는 듯 합니다. png로 크게 키우고 이미지를 작게 조절해도 깨지기 일쑤인 아이콘 이미지 파일을 SVG 유형으로 사용할 수 있고, 깔끔한 디자인이 포인트인 고마운 무료 사이트입니다. 제작자 Colebemis 원하는 아이콘을 클릭하면 바로 파일이 다운로드 됩니다. Size와 Stoke width를 조절하여 원하는 느낌의 아이콘 디자인으로 변경하여 다운로드도 가능합니다. Color 코드를 입력하여 컬러 변경도 가능합니다. 상단의 Reset 버튼을 클릭 시 모든 설정이 초기화됩니다. feather에서 다운로드한 s..

IT Tip 2020.07.01

[디자인트렌드] 멋진 원페이지 웹사이트 디자인 21

여러개의 페이지로 생성할만한 충분한 양의 콘텐츠가 없을 때 소량의 콘텐츠와 텍스트만으로도 멋진 웹사이트를 구현할 수 있는 원페이지형 웹사이트 21가지를 소개합니다. 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다. 원페이지 웹사이트는 콘텐츠의 양이 적어 웹사이트 내에서 머물 수 있는 요소가 적을 수 있지만, 대신 스크롤을 내리고 슬라이드를 탐험할 수 있도록 다양한 인터랙션을 적용하면 콘텐츠의 양이 많은 웹사이트보다 콘셉을 전달하고 감각을 표현하는 데에 더욱 효과적일 수 있습니다. 요즘 많은 브랜드와 기업들이 단기적인 캠페인을 홍보하거나 마이크로사이트 등으로 활용하고 있습ㄴ다..

Design Trend 2020.03.29

맥 초보 탈출 - 맥에 폰트 설치하기

기존에는 맥에 otf 유형의 폰트 파일만 사용이 가능했는데, 요즘에는 ttf 파일도 가능하다고 하네요. 맥에 폰트 설치하는 방법입니다. 저는 무료 영문폰트는 dafont 라는 곳에서 주로 다운로드합니다. 고딕, 명조, 핸드라이팅 등 폰트의 성격 별로 잘 나위어져있고, 영문폰트라 구매가 저렴하며, 일부는 개인 사용 무료 또는 100% 무료인 경우가 많아 잘 사용하고 있어요. 가장 큰 편리한 점은 내가 적용하고자 하는 텍스트를 해당 폰트로 미리보기하여 검색할 수 있다는 점입니다. dafont는 일반 작가들이 폰트를 업로드할 수 있는 사이트로, 저도 hapole 폰트를 만들어 배포하기도 했습니다. Hapole font Download 여기서 폰트를 다운받았는데, 맥에는 어떻게 적용할까요? 맥에 폰트 설치하기 ..

IT Tip 2020.03.21
반응형