본문 바로가기

김프 레이어 마스크 사용하는법 안녕하세요. blogHow입니다. '김프 레이어 마스크 사용하는법'에 대해 말씀드립니다. 김프에서 마스크를 이용하면 2개 이상의 이미지를 겹쳐보이게 하는 효과를 낼 수 있는데요. 다음 내용을 따라해 주세요. 1 김프를 실행합니다. 편집할 이미지 2개를 김프의 '레이어' 영역에 끌어다 놓습니다. 2 상단 이미지에 마우스 오른쪽 클릭을 합니다. [레이어 마스크 추가]를 클릭해 주세요. 3 '흰색(완전 불투명)'을 선택하고 [추가] 버튼을 누릅니다. 4 김프 툴박스에서 '그라디언트' 툴을 누르고 전경색과 배경색을 검은색/흰색으로 선택합니다. 5 이미지의 위에서 중간 영역까지 그라디언트 툴로 드래그앤 드롭을 해줍니다. 6 (내부적으로) 그라디언트가 칠해진 높이만큼 뒤에 있는 이미지가 자연스럽게 섞여서 나옵니다... 더보기
반응형 웹사이트 테스트 툴 소개 반응형 웹사이트 테스트 툴을 소개합니다. 반응형 웹사이트에서 중요한 점은 '모바일 퍼스트'가 얼마나 잘 적용되었느냐 입니다. 모바일은 데스크톱에 비해 성능이 떨어집니다. 그러므로 로딩 속도를 저하시키는 요소가 없는지, 다양한 화면크기에 웹이 잘 표시되는지 테스트하는 것이 중요합니다. 1 Yslow 플러그인. 웹 페이지의 성능을 알려주는 플러그인입니다. 측정하고 싶은 웹페이지를 띄워놓은 후 플러그인을 실행합니다. [Run Test] 버튼을 눌러 사이트의 성능을 테스트합니다. 'Grade' 탭에서 테스트 결과를 확인하여 등급이 낮은 요소를 개선시키는데 사용하세요. 2 Window Resizer. 크롬 확장프로그램입니다. 작은화면의 스마트폰, 중간화면의 태블릿, 큰 화면의 데스크톱 사이즈가 설정되어 있어 창 .. 더보기
디바이스 크기에 따른 반응형 웹디자인 전략 사용자의 디바이스는 그 크기와 기능이 모두 다릅니다. 그러므로 화면 크기를 고려한 레이아웃을 짜야하고, 브라우저가 지원하는 기능이 어디까지인지 파악하기 위한 자바스크립트를 사용해야 하기도 합니다. 이를 위해 디바이스 크기에 따른 반응형 웹디자인 전략을 잘 세워야 합니다. 가장 작고 기능이 부족한 디바이스를 시작으로 하여 조금씩 성능을 확대해 나가는 점진적인 향상을 꾀하는 것이 좋은 방법입니다. 아래에 4가지 대표적인 디바이스와 그에 따른 웹디자인 전략이 있습니다. 1 피쳐폰과 같은 매우 작은 화면을 가진 디바이스입니다. 기본적인 HTML 간단한 레이아웃 작은 이미지 제한된 CSS와 자바스크립트 2 스마트폰과 같이 작은 화면을 가진 디바이스입니다. 지원 여부에 따라 최신 HTML5 기능 추가 간단한 레이아.. 더보기