티스토리 뷰
https://material.io/devices/
에서 대개 많이 사용되는 갤럭시S6 dp 해상도를 확인해보면
360 x 640
포토샵에서 캔버스 크기는
위 사이즈 * 2로 잡고
photoshop generator 로 50%, 100% 이미지를 생성
각각 1x , @2x 이미지로
Density 가 4 로 되어 있음을 확인 할 수 있는데
360 (dp) x 4 (density) = 1440 (px)
즉, 1440 px 넓이의 이미지를
360 넓이로 1/4로 고농축 압착하여 보여줌
반대로 설명하자면 360 px 넓이 이미지를
기기에서는 4배인 1440 px 넓이로 늘려 보여줌
여튼, 귀찮거나 모르겠다 싶으면
일단 포토샵 캔버스 크기를 360 x 640 px 로 작업하고
브라우저 렌더링 확인해보기.
웹브라우저로 인한 이미지가 흐리게 보이는 이슈가 나타날때
또렷하게 하기 위한 css 는
http://itzone.tistory.com/670 참고
'디자인 > 웹디자인' 카테고리의 다른 글
Top news magazine style themes for your design inspiration (0) | 2013.04.18 |
---|---|
템플릿 사이트 카피로 웹디자인 연습시 참고할점 (0) | 2013.04.15 |
2010 기대되는 디자인 트렌드: 단순한 사용자경험/사용자인터페이스 디자인 (0) | 2010.06.23 |
웹개발자의 디자인적 문제해결을 위한 10개의 템플릿 (0) | 2010.01.24 |
Newspaper 웹사이트 디자인: 트렌드와 예제 (0) | 2010.01.24 |
댓글
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- Mac
- nginx
- Prototype
- macos
- CSS
- git
- sencha touch
- Debug
- iis
- IE
- iphone
- Wordpress
- Docker
- laravel
- 한글
- 안드로이드
- IOS
- JQuery
- JSON
- PHP
- javascript
- 워드프레스
- classic asp
- ASP
- Android
- nodejs
- API
- centos
- mssql
- Linux
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
글 보관함