728x90 📝공부, 스크랩/디자인29 [UI 용어 정리] 모달/팝업/스낵바 모달(레이어 팝업) - 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능 - 라이트 박스라고도 불림 - 모달을 삭제 하려면 반드시 사용자가 특정 선택을 해야함 모달 중 어떤 방법으로 보여줄 지 선택하는 방법 Alert / Simple / Confirmation / Full screen 팝업 - 페이지 위에 또 하나의 브라우저 페이지를 띄움 - 차단되는 경우도 있어서 필수적인 것은 모달이 좋음 토스트 팝업(Toast Pop-up) - 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름 - 알림을 위한 팝업의 일종 - PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태 (시간 지정 가능, 2.5초 또는 3초 권장) - 모바일의 경우 화면의 중앙 or 최상단에 스낵바(Snack .. 2022. 3. 4. [포토샵] 마스크 처리 / 커브 기능 / 뿌연 그림자 / 자유 그라디언트 선택 영역이 잡힌 상태에서 마스크 선택된 부분만 살리고 나머지는 자동으로 지워줌 클리핑 마스크 처리된 레이어를 합치면? 클리핑 마스크 처리된 레이어의 경우 마스크에서 검은색으로 처리된 부분만 선택영역으로 잡힘 => 클리핑 마스크 처리된 레이어 두 개를 합치면 누끼따진 부분만 남음 커브 (Ctrl+M)을 이용해서 색상 조절 옐로우를 빼려면, 옐로우의 보색인 블루 선택 블로계열 선택 후 곡선을 아래로 내리면 노란색 / 위로 올리면 파란 느낌이 더 많이 듦 뿌연 그림자 만들기 검은색으로 채운 후 가우시안 블러 처리 필터 - 블러 - 가우시안 블러 투명도 조절 후 위치 이동 자유 그라디언트 1. 브러시로 색을 칠하기 2. 가우시안 필터 넣기 (필터-흐림효과-가우시안 흐림효과) 3. Liquify로 경계선 부드럽.. 2022. 3. 1. [UI 용어 정리] 메뉴 관련 1. 컨텍스트 메뉴(Context Menu) - 사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것 - 팝업 메뉴, 바로 가기 메뉴 - 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출 2. MRU(Most Recently Used) 리스트 - 사용자가 특정 종류의 행위를 했을 때 마지막 행위를 기록해두는 것 - 최신 항목 3. 어뎁티브 메뉴(Adaptive Menu) - MRU 리스트 개념을 메뉴에 도입한 방식 - 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것 4. 테어오프 메뉴(Tear-off Menu) 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴 5. 메가메뉴(Mega Drop-down Menu) - GNB에 위치한 특정 메뉴에 마우스.. 2022. 2. 28. [UI 용어 정리] 버튼 관련 상태를 나타내는 것 Enabled 상호작용이 가능한 상태일 때 Disabled (어떤 이유로든) 동작할 수 없는 비활성 상태일 때 Hover 마우스 또는 포인터가 올려진 상태일 때 Focused 키보드 또는 음성 등의 입력을 통해 강조된 때 Pressed 마우스 또는 포인터로 클릭/터치했을 때 버튼 관련 Drop Down List (=Pulldown Menu) 버튼을 클릭하거나 커서를 올렸을 때, 세부 항목들이 펼쳐지고 그중 하나의 항목(값)을 선택할 수 있는 요소 콤보 박스 (Combo Box) 드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보)한 형태 스피너 (Spinner) 대표적인 숫자 입력 컨트롤 숫자값을 위아래 화살표 버튼을 눌러 조절하거나 편집 필드에 직접 원하는 숫자값을 입력 가능 라디.. 2022. 2. 27. [포토샵] 그림자있는 선 / 물결 무늬 만들기 / 가장자리 다듬기 / 한 캔버스에 여러 디자인 자르기 라인 그림자 만들기 1. 원 모양 브러쉬 만들기 페더값이 있는 은은한 브러쉬 선택 (만약 안 보이면 설정 클릭) > 클릭 > 만들기 2. 반 정도만 선택 영역 잡고 자르기 3. 납작하게 만들기 png로 만들어서 여기 저기 사용하면 좋음 물결무늬 만들기 Fill - Distort - Wave (필터 - 왜곡 - 파형) 제너레이터 수 = 파동의 개수 파장 = 좌우 파장의 길이 (물결무늬를 만들고 싶으면 일정해야 함) 진폭 = 파장의 높낮이 가장자리 다듬기 누끼를 딸 부분이 어떻게 될 지 미리 볼 수 있음 + 선택 영역 잡은 것 수정 가능 * 대비 = 더 또렷하게 * 가장자리 이동 = 작아질 수록 안쪽으로, 숫자가 커질 수록 바깥쪽으로 한 캔버스에 여러 디자인 자르기 (카드뉴스 제작 시 추천) 안내선을 만들고.. 2022. 2. 20. [포토샵] 텍스트 레이어 꾸미기 2) - 그림자 / 긴그림자 / 투명하게 / 페인트칠 그림자 주기 그림자 크기를 0으로 하면 더 선명하게 줄 수 있음 긴그림자 만들기 밑에있는 글자 레이어를 검은색 > Rasterize Type을 눌러 이미지화 > 45도 각도로 회전 > 원하는 길이가 나올 때까지 Alt + 아래로 향하는 방향키 > 한 레이어로 합치기 > 원래 위치로 돌리기 더 길게 만들 수도 있고, 투명도를 조절하거나, 그라데이션을 넣을 수 있음 액션 패널에서 롱쉐도우 자동으로 만들어주는거 클릭 가능!! (우디님 다운로드 결과) 투명하게 만들기 (뻥 뚫리게) 1. 배경위에 글자를 적기 2. 글자 부분을 선택하기 (Ctrl + 썸네일) 3. 선택한 채로 배경 레이어를 선택 4. 직접 편집할 수 없다고 뜨면 오른쪽 버튼을 누르고 배경 레이어를 '이미지화'처리하는 레이어 래스터화 선택 5. D.. 2022. 2. 19. [포토샵] 자주 사용하는 단축키 정리 잘 모르지만 자주 쓸 것 같은 거 이동 툴 = Move Tool (V) 선택 영역 반전 = ctrl + shift + I 클리핑 마스크 = Ctrl + Alt + G 눈금자 = ctrl + R 가이드 라인 켜고 끄기 = ctrl + ; 새 레이어 = ctrl + alt + shift + N (특정 레이어 클릭하고 누르면 그 위에 생성) 레이어 복사하기 = ctrl + J 레이어 순서 이동 = ctrl + [ , ] 레이어 선택하기 = alt + [ , ] 레이어 투명도 조절 = 레이어 선택 후 숫자키 1 ~ 0 (100%는 숫자 0, 두자리%도 가능) 툴의 특정 수치 조절 = 엔터 + 숫자 + 엔터 (%를 의미하는 것들은 바로 숫자키를 눌러도 됨) Ctrl + T 한 후, Ctrl 누른 상태에서 점부분 .. 2022. 2. 18. [포토샵] 기타 기능들 - 원하는 레이어만 PNG / 패스 선택 / 레이어 래스터화 레이어 크기만큼 바탕이 잘리게 방법 : Image - Trim 빨리 원하는 레이어만 png 저장하기 방법 : Quick Export PNG Trim까지 된 채로 저장이 됨 가이드 라인 보기 & 끄기 미리 설정해둔 가이드라인 : Ctrl + R 안내선 : Ctrl + ; 패스 선택 & 직접 선택 패스선택 - 패스선으로 이루어진 오브젝트를 선택할 때 사용하는 툴 - 마우스로 클릭하거나 드래그하면 전체 패스선이 잡힘 - 단 전체 선이 잡혀서 특정 부분을 변화시키는 건 불가능 직접선택 - 포인트나 선분을 하나씩 선택할 수 있음 - 자세히 보면 오른쪽 부분만 드래그해서 그 부분만 패스 선이 잡힘을 볼 수 있음 (오른쪽 : 검은색상이 채워진 박스, 왼쪽 : 흰색상이 채워진 박스) 레이어 래스터화 직접 편집할 수 없.. 2022. 2. 17. 이전 1 2 3 4 다음 728x90
