간결한 날씨 애니메이션 아이콘

웹사이트를 만들때 참고할 만한 아이콘입니다. 날씨를 표현하고자 할 때 간결하면서도 깔끔한 이미지를 줄 수 있는 아이콘 입니다.

디테일하면서도 가각각의 이미지들을 그려낸 솜씨가 멋집니다. 다음 이미지 모두 이미지 파일이 아닌, CSS로 구현해낸 코드입니다. 어떻게 이렇게 만들어 내는지 궁금하네요.

열심히 공부해서 이런 코드를 직접 만들어 보고 싶네요. 우선은 참고하고 공부할 재료로 삼아서 열심히 보는 수밖에 없을 것 같습니다.

참조
http://codepen.io/joshbader/pen/EjXgqr?ref=webdesignernews.com

댓글

댓글 쓰기

이 블로그의 인기 게시물

디자이너를 위한 자동 색상 조합 칼라 팔레트

이미지
디자인을 위해서는 적절한 색상 조합이 중요한데요, 자주 쓰이고 편안하게 쓸 수 있는 색상 조합을 생성해주는 사이트가 있어서 소개드립니다. materialpalette 란 사이트인데요. 사이트는 간단하게 구성되어 있습니다. 좌측에서 칼라 팔레트를 선택합니다. 원하는 색상을 두가지를 선택하면 우측의 칼라 팔레트에 자동으로, 색상 조합표가 생성됩니다. 이 색상 조합을 이용해서 디자인에 활용하면, 깔끔하고 세련된 느낌의 색 조합을 가지는 디자인을 만들 수 있습니다. 단순하고 직관적으로 색 배치가 되어 있어서 편하게 색상을 선택할 수 있습니다. 두가지 색상을 선택하면 위와 같이 색상 팔레트를 자동을 매칭해서 보여줍니다. 이 색상 배색을 이용하면 세련된 느낌을 갖는 디자인을 만들 수 있습니다. 이 색상을 이용하여서 만들 수 있는 예시를 동시에 보여주는 데요. 깔끔한 느낌이 묻어나네요. 디자인 작업 중에 색상에 대해 고민이라면 이 사이트를 활용해 보시기 바랍니다. http://www.materialpalette.com
자세한 내용 보기

3단 브로셔 제작을 위한 디자인 템플릿 모음

이미지
3단 브로셔를 제작할 때, 기존에 무료로 제공하는 템플릿을 이용하면 손쉽게 원하는 형태의 브로셔를 만들 수 있습니다. 그럼 무료로 3단 브로셔 디자인 템플릿을 얻을 수 있는 곳을 소개드립니다. http://www.templateshock.com/tri-fold-templates/ 이곳에서는 무료템플릿과 유료템플릿이 있습니다. 가격을 잘 살펴보고 사용하시길 바랍니다. https://www.behance.net/gallery/23773605/Tri-fold-Brochure-Template-Freebie 세련되고 정돈된 형태의 3단 디자인 무료 템플릿입니다. 브로셔를 디자인 할 때 적용하면 손쉽게 멋진 3단 브로셔를 만들 수 있습니다. 참조: http://www.templateshock.com/tri-fold-templates/ https://www.behance.net/gallery/23773605/Tri-fold-Brochure-Template-Freebie
자세한 내용 보기

세계 유명 브랜드가 사용하는 칼라 코드를 알아보자

이미지
색상에 대한 공부를 하면서, 다른 사람이 사용하는 칼라 코드라든지, 유명 기업의 칼라 코드를 유심히 보게 되었습니다. 색상 배합과 어떤 효과를 만들어 내는지에 대해서는 많은 공부가 필요한 것 같습니다. 이런 색상 코드는 유명 브랜드에 대해서 한참을 찾아보아야 알 수가 있는 것 같습니다. 이런 번거로움을 한번에 해결할 수 있는 사이가 있어서 소개드립니다. 세계의 유명 브랜드의 공식적인 색상 코드를 색상 코드와 해당 색상을 함께 정렬해 놓은 곳입니다. 그럼 한번 대표적인 기업들의 색상 코드를 보실까요. 위 예시에서 보듯이 색상만 봐도 그 브랜드의 이미지가 곧바로 연상되는 느낌이 듭니다. 색상과 브랜드는 뗄레야 뗄수 없는 밀접한 관계가 있다고 느껴집니다. 만약 새로운 브랜드를 만들 고민을 하고 있다면, 기존의 브랜드의 배색을 한번 살펴보면 많은 도움을 얻을 수 있을 것으로 생각됩니다. 디자인 공부를 하는 분이라면 살펴볼만한 사이트입니다. 참조: http://brandcolors.net/?ref=webdesignernews.com
자세한 내용 보기