본문 바로가기

전체 카테고리

컨텐츠 이미지 라운딩 컨텐츠 이미지에 라운드를 줘보자! 티스토리에 이미지를 올릴때 라운드를 주어 이미지를 좀더 부드럽게 보이게 하는 방법을 포스팅 해볼려고 합니다 ^-^; 어쩌면 "포토샵으로 하면 되는거 아니야?" 할 수 있는데 매번 번거롭고 CSS로 충분히 커버가 가능하며 효율적이므로 이제 이렇게 한번 사용해보시길 바랍니다! 내 블로그의 컨텐츠 담당영역을 알아보자! 컨텐츠 안에만 들어가는 이미지에 라운드를 주기 위해서 컨텐츠를 담당하는 클래스명을 찾아보도록 하죠. 여기선 크롬브라우저를 예로 알아보도록 합니다. CTRL + SHIFT + C 를 누르면 위의 이미지와 같이 나오는데 컨텐츠 영역으로 마우스 커서를 두다 보면 컨텐츠 영역으로 크게 범위가 잡히고 오른쪽에 DIV 클래스를 표시 해줍니다. 저는 entry-content..
무료이미지 & 텍스쳐 & 아이콘 무료이미지와 텍스쳐 그리고 아이콘까지! 최근에 알게된 그리고 자주 사용하고 있는 이미지 사이트들을 소개해 드리도록 하겠습니다. 기존에 블로깅한 사이트들도 이용할만하니 모두 참고하여 작업할때 도움이 되시길 바라며 혹시라도 링크가 깨져 있거나 할 경우 댓글로 남겨주시면 정말 감사할것 같습니다. : ) RAW PIXEL - 이미지 이미지의 양은 많지는 않은 편이지만 퀄리티는 꽤 준수한 사이트 입니다. 상단에 FREE, PREMIUM, DESIGN RESOURCES, THEMES, PUBLIC DOMAIN 카테고리 메뉴가 있으며 개인적으로는 검색을 통해서 이미지를 얻어내는 것이 좋다고 생각합니다. 물론 영어로… (디자이너의 덕목에는 검색 능력도 필수!) 다만 PREMIUM은 유료서비스이며 무료 서비스로는 하루 ..
어벤져스 : 엔드게임 인피니티워 결말과 그리고 시작 이 리뷰에는 "인피니티워", "엔드게임"에 대한 중요 스포일러가 있습니다. 주의해주세요. 필자가 영화를 자주 보지 않지만 영화리뷰를 써본다. 얼마만인지… 물론 그 동안 본 영화가 한 두개 더 있는데 리뷰를 쓰진 않았다. (귀찮아서…) 하지만 엔드게임은 꼭 써봐야겠다고 생각해서 본지는 좀 됬지만 늦게나마 적어본다.어벤져스 전작인 인피니티워에 이어서 이야기가 진행되는 엔드게임은 타노스의 손가락 튕기가 성공하여 결국 우주의 절반의 인구가 날라가게 되었다. 그러면서 역시 인구의 절반인 히어로들도 가루가 되어 사라지게 되는데… (스파이더맨, 닉퓨리, 로키(사망), 콜렉터, 가모라, 비전, 윈터솔져, 그루트, 블랙팬서, 팔콘, 닥터스트레인지, 스타로드, 멘티스, 힐) 줄거리 3시간 분..
마우스 클릭 효과 어느 곳을 클릭 할 때마다 효과를! 사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다. 생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보도록 하자. 출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag CSS 코드 HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝. div.clickEffect{ position:fixed; box-sizing:border-box; border-style:solid; border-color:#000000; bo..
메탈패턴&텍스쳐 PSD 메탈패턴으로 거칠게 가자 디자이너마다 주로 사용하는 패턴이나 텍스쳐가 있다. 잘하는 디자인이라던가 회사 특성상 하는 디자인의 종류에 따라 변하기는 하는데 필자 역시 그렇기에 메탈패턴을 추천을… 이래저래 패턴이나 텍스쳐는 가지고 있으면 마음에 안정(?)이 되니 꼭 챙겨두시길 바라며 이전과 다르게 PSD를 제공한다. 이유는 레이어 스타일을 복사하여 붙여 사용하기 때문이다. (패턴으로 만들기 귀찮아서 그런건 아니..) 출처 링크 바로가기 출처링크로 가서 받을 수도 있다. 하지만 필자가 위에 이미지와 같이 작업해놓은 PSD가 사용하기에는 편할 것 같다. PSD 다운로드(구글드라이브) 사용방법 1. 다운받은 PSD를 포토샵에서 연다. 2. 포토샵 레이어 창에서 원하는 스타일의 레이어를 클릭. 3. 마우스 오른쪽 ..
유튜브 썸네일 텍스트 핫한 유튜브의 썸네일 텍스트 효과 최근이라고 하기엔 뭐할정도로 유튜브를 하려는 사람들이 급상승 하고 있다. 나이대는 뭐 10대부터 70대까지 누구나 다 도전하고 있다고 봐도 무방하다. 그만큼 하는 사람이 많은 반면에 성공하는 사람은 많지는 않다. 뭐 소소하게 취미정도로 시작한다면 전혀상관없지만… 유튜브의 성공을 이끌어주기 위한 가장 기본적인 것은 썸네일이 아닐 수 없다. 어그로성 썸네일부터 해서 자극적인 썸네일까지. 하지만 그것은 오히려 장기적으로 좋지 않다라는것을 알 수 있을텐데 그래서 눈에 잘 띄고 신뢰감을 줄 수 있는 썸네일 텍스트 효과 강좌를 해보려고 한다. 위에 참고할 텍스트 효과다 이 효과라면 눈에 잘 띄면서 역동적인 텍스트 모습으로 유저에게 클릭을 유도할 수 있을거라 믿는다. 텍스트효과 강좌..
해상도 낮은 이미지를 키우기 이미지의 해상도 우리는 보통 이미지를 가지고 일을 하다가 종종 난감할 때가 있다. 바로 작은 이미지를 크게 늘려야만 하는 상황이 있을때가 말이다. 보통은 비슷한 걸로 대체가능할 수 있다면 가장 좋은 방법이겠지만 그게 아니라면 여간 난감하지 않을 수 없다. 왜냐하면 억지로 늘릴 수록 이미지는 형채를 알아보기 힘들거나 그나마 정상이었던 이미지가 허접하게 변하기 때문이다. 완벽하진 않지만 아주 방법이 없는 것은 아니다. 아래 사이트를 통해 해상도 손실을 최소화하며 늘려보자! http://waifu2x.udp.jp/index.ko.html 2배까지는 괜찮아! 사이트 사용방법은 매우 쉽기 때문에 특별히 설명이 필요 없을것 같지만 간단히 글로 설명을 하자면 이미지를 첨부파일로 넣고 이 이미지가 그림인지 사진인지 선..
100주년 기념서체 4종 3.1운동 및 대한민국임시정부 수립 100주년 기념 최근에 3.1절 기념폰트를 2종 소개해드렸는데 이번에는 새로운 4종을 소개해드리려고 한다. 사실 3.1절 100주년 기념서체는 편하게 쓰기 쉽지는 않은 폰트였지만 이번에는 실무에서도 쉽게 적용할 수 있고 물론 상업적으로도 무료이용이기 때문에 자신있게 추천해드린다. 윤디자인에서 7년동안 제작한 4종의 폰트 대한체, 민국체, 독립체, 만세체다. 폰트설치는 실행파일로 되어 있으며 아래 링크를 따라가서 제일 하단에서 받을 수 있다. 100주년 기념서체 다운로드 받으러 가기
귀여운 도트패턴 귀여운 느낌의 파스텔톤 도트패턴 필자가 블로깅하면서 몇번 언급 했지만 필자는 귀여운 느낌의 디자인 작업을 잘 하지 못 한다. 그래서 귀여운 느낌의 디자인을 잘하는 사람이 부럽기도 하고 나도 저렇게 하고 싶다해서 나름 따라도 해보고 한 정도가 겨우 봐줄만한 정도랄까.. 그래서 귀여운 느낌은 디자인 자료나 강좌는 거의 없거나 아마 없을텐데 필자도 때에 따라 그리고 이런 느낌을 또 필요로 하는 사람분들이 있을 것 같아서 블로깅 하려고 한다. 아마 이런 디자인을 어려워 하는 이유는 필자에게 그 귀엽다라는 갬성이 없어서 그런것 같다… 위의 섬네일과 같은 밝은계통의 도트패턴을 받고 싶다면 링크를 통해서 받아보도록 하자. 도트 패턴 9종 다운로드 9종과 다르게 좀 어두운 느낌의 도트패턴 12종이다. 도트 패턴 12종..