반응형 3

포토샵에서 펜 툴로 HTML TABLE 만들기 (반응형 대응)

안녕하세요. 머프입니다. 오랜만에 올려보내요. 이번 디자인 팁은 포토샵에서 html table 작업 시 펜 툴로 작업하는 방법입니다. 실무에서 직접 사용하는 방법이므로 참고하셔서 사용하시면 도움이 많이 될 것입니다. 이렇게 제작이 되어야 퍼블리싱 할 때 바로 코딩이 가능하며 오차 없이 글자와 줄 간격이 일정하게 유지됩니다. 1. 포토샵에서 새 창을 엽니다. 새 창은 아트 보드로 가로 1200 픽셀, 세로 600픽셀로 만듭니다. 아래 예제 파일로 제공되오니 참고하시기 바랍니다. 2.Rectangle tool로 가로 960 픽셀, 세로 55 픽셀의 사각형 박스를 만듭니다. 여기서 사각형 스타일은 예제 파일을 참고하시기 바랍니다. 3.Text tool로 테이블의 제목을 나열합니다. 여기서 사각형 박스와 텍스트..

DESIGN TIP 2024.01.06

서울특별시 교통위반 단속 조회 서비스 웹사이트 UX/UI 디자인

디자인 개편되기 전에 서울특별시 교통위반 단속 조회 서비스 웹사이트 디자인 개편된 웹사이트 메인, 서브 기존 텍스트 중심의 콘텐츠 및 정적이고 어수선한 사이트를 개편하여 서울시 불법 주정차를 살리는 UI/UX 설계에 중점을 두고 디자인 방향을 잡음. 디자인 콘셉트 “시민과 함께” 콘셉트 고객이 희망하는 주정차 및 과태료 정보를 정리하여 맞춤형 정보로 보일 수 있도록 구성하며 CI 색상의 고유의 느낌을 살리고 정보를 각 섹션 별로 그룹화하여 디자인 콘셉트를 표현하고자 함 주정차 및 과태료 정보 검색 강화 정확한 정보 및 주정차, 과태료 정보 검색 기능 강화 접근이 쉬운 UI 정보의 정확도 및 조회, 과태료 정보 제공을 위주로 구현하였다. 사용 편의 필요한 기능을 별도 정의하여, 서비스적 접근성을 높일 수 ..

GALLERY 2022.09.12