이번에 우리가 해야 할 일은 5 s 크기의 APP 효과 전시입니다.
단계:
1. 640* 1 136 크기의 새 캔버스를 만듭니다. 5S 효과 맵 템플릿으로 저장됩니다.
2. 렌더링 이라는 새 캔버스를 만듭니다.
2. 렌더링 이라는 새 캔버스를 만듭니다.
크기는 임의적이니, 너는 그것을 크게 해서 스스로 볼 수 있다.
3. 5S 효과 맵 템플릿을 드래그합니다. 너는 방금 캔버스의 PSD 에 저장했다.
Ctrl+T 를 적절한 크기로 변환하고 적절한 원근 효과로 기울입니다.
4. 그런 다음 레이어 5S 효과 맵 템플릿을 두 번 클릭합니다.
이 그림의 뒤로 뛰어내리다.
원하는 인터페이스로 드래그하십시오.
5. 이 프레젠테이션 페이지로 돌아옵니다. 참고: 여기서 한 단계는 생략되었습니다. 방금 저장한 도면층을 끕니다.
레이어를 복사합니다.
Option(Alt)+ 마우스 왼쪽 버튼을 누른 채 레이어를 아래로 드래그하거나 Command(Ctrl)+J 를 누른 채 아래쪽 레이어를 선택하고 레이어를 두 번 클릭하여 레이어 스타일로 이동하고 경사와 엠보스를 선택한 다음 매개 변수를 설정합니다.
매개변수는 자체적으로 조정할 수 있습니다. 여기서 45 그림자 각도는 주변광이 있는 경우 조정할 수 있고 그림자 모드 투명도는 상황에 따라 임의로 조정할 수 있습니다.
6. 그런 다음 두 번째 레벨부터 시작하여 여러 레이어를 연속적으로 복사합니다. 복제된 각 레이어는 이전 레이어 아래에 있고 복제된 각 레이어는 한 픽셀씩 아래로 이동합니다. Option(Alt)+ 마우스 왼쪽 버튼을 누른 채 레이어를 아래로 드래그합니다. 키보드의 아래쪽 화살표 키를 사용하여 제어할 수 있습니다.
그런 다음 마지막 레이어에 투영을 설정합니다.
그런 다음 마지막 레이어에 투영을 설정하면 매개변수가 자체적으로 해결됩니다.
마지막으로 전체 환경을 조정합니다.
이 자습서의 장점은 스마트 오브젝트를 사용하여 원하는 인터페이스를 자유롭게 교체할 수 있다는 것입니다.
여러 인터페이스의 효과를 표시하려면 해당 PSD 에서 몇 번 드래그하고 평면이 배열된 후 원근 효과를 균일하게 조정하면 됩니다.
물론, 표현하는 방법에는 여러 가지가 있는데, 이것은 단지 그 중 하나일 뿐이다.
예를 들어, 큰 캔버스에 640× 1 136 크기의 사각형을 그린 다음 스마트 오브젝트로 만들고 스마트 오브젝트를 두 번 클릭하여 조정할 수도 있습니다.
첨부 @ 정씨의 방법은 원리가 같고 세부 사항이 더 풍부하다.
한 가지 효과를 얻을 수 있는 방법은 수천 가지가 있는데, 여기에는 PS pure 로 만든 간단한 아이디어만 제공된다.
첫째, 왜곡&; 방사형
인터페이스 맵을 가져온 다음 편집-비틀기 및 회전하여 다음과 같은 효과를 얻습니다.
둘째, 생산 두께
이 단계가 가장 중요합니다. 인터페이스 레이어 [Ctrl+Alt+T] 를 선택한 다음 화살표 키 [↑] 를 클릭하고 enter 키를 누릅니다. 이렇게 하면 레이어가 복제되고 새 레이어가 한 픽셀씩 위로 이동합니다.
자, [Ctrl+Alt+Shift+T] 를 미친 듯이 누르는 것은 이전 변환 작업을 반복하는 것입니다. 이렇게 하면 많은 레이어가 복제되고 각 레이어가 이전 레이어를 기준으로 한 픽셀씩 위로 이동합니다. 두께 효과를 얻을 수 있습니다.
셋째, 밝기를 변경합니다
최상위 수준을 유지하고 다른 모든 인터페이스 레이어는 [thickness] 라는 하나의 레이어로 결합됩니다.
그런 다음 [두께] 레이어를 선택하고 사각형 선택 윤곽 도구+[이미지-조정-밝기 대비] 를 사용하여 두께 왼쪽과 오른쪽의 밝기를 각각 20 과 50 으로 줄입니다.
넷째, 그림자
[app] 레이어를 복제하고 레이어 순서를 [두께] 아래로 변경한 다음 [가우시안 흐림]+색상 오버레이를 사용하여 검정+불투명도로 30% 로 변경합니다. 끝났어.
자, PS 를 사용하여 그림을 APP 렌더링으로 바꾸는 방법에 대해 이렇게 많이 말씀드렸습니다. 배웠어?
UI 디자인의 디스플레이 UI 디자인에서 인터페이스 아이콘을 만드는 방법
1, 아이콘 크리에이티브 단계;
스케치 단계;
3. 제도 렌더링 단계.
보충 자료:
1. PS 에 원하는 크기의 새 캔버스를 만들고 UI 디자인 렌더링 템플릿이라는 이름으로 저장합니다.
2. 새 캔버스를 만들고 이름을 인터페이스 UI 디자인 렌더링 디스플레이로 지정합니다. 크기는 임의적입니다.
3. 저장된 UI 디자인 효과 맵 템플릿을 드래그합니다. Psd 를 캔버스로 보냅니다. Ctrl 을 적절한 크기로 변환하고 적절한 원근 효과로 기울입니다.
4. 그런 다음 UI 디자인 효과 맵 템플릿 레이어를 두 번 클릭합니다.
보충: UI 는 사용자 인터페이스의 약어입니다. 일반적으로 휴대폰 앱, 웹 페이지, 스마트 웨어러블 장비 등을 포함한 사용자의 조작 인터페이스를 말합니다. UI 디자인은 주로 인터페이스의 스타일과 아름다움을 가리킨다. 사용상 소프트웨어의 인간-컴퓨터 상호 작용, 조작 논리, 인터페이스 미관의 전반적인 설계는 또 다른 중요한 출입구이다. 좋은 UI 는 소프트웨어 개인화, 품위, 편안함, 단순성, 자유로움, 소프트웨어의 포지셔닝 및 특징을 완벽하게 구현합니다.
앱이 페이지를 여는 것은 어떻게 디자인합니까? 이 다섯 가지 일반적인 방법을 살펴 보겠습니다. 첫인상이 중요해요! 많은 사용자들은 앱/웹사이트의 초기 이미지에 따라 이 회사나 제품을 신뢰할 수 있는지 판단한다.
그렇다면 빠른 인식 문제를 어떻게 해결할 수 있을까요? 첫째, App 가 우리에게 가져온 첫인상에 집중하십시오. 합리적인 시작 페이지는 사용자의 잠재 의식을 자극하고 적절한 사용자를 유치하고 유지하는 데 도움이 됩니다.
설계 전략을 깊이 연구하기 전에 시작 화면의 기본 사항을 살펴보겠습니다.
시작 화면은 사용자가 응용 프로그램 아이콘을 클릭하는 것부터 콘텐츠를 로드하는 것까지 연속적인 경험을 말합니다. 일반적으로 다음과 같은 다섯 가지 형식이 포함됩니다.
1, 응용 프로그램 아이콘 (시작 경험에 참여하는 첫 번째 링크)
2. 화면 시작 (화면 페이지 열기)
3. 화면 페이지를 열고 콘텐츠 페이지로 이동합니다
4. 골격 화면 시작 테이블 (로드 예정)
5. 애니메이션 화면이 열립니다 (추가 내용 로드)
시작 화면 페이지는 제품 경험의 포털로, 더 빠른 로드 시간을 시뮬레이션하여 원활한 시작 환경을 조성하고 사용자 경험을 향상시킵니다.
디자인은 외관뿐만 아니라 특정 사용자 문제에 대한 해결책에도 초점을 맞추고 있습니다. 시작 페이지에서 해결할 수 있는 문제는 무엇입니까?
무의식적으로 사용자와 소통하고 미래에 대한 기대를 설정하십시오.
-로드 프로세스를 숨겨 인식 대기 시간을 줄입니다.
-사용자에게 App 의 용도와 브랜드를 소개합니다.
-사용자에게 즐거운 경험을 제공합니다.
문제를 빗질하여 페이지를 여는 다섯 가지 방법을 요약하면 사용자의 주의를 효과적으로 끌 수 있다.
IOS 10 부터 개발자는 미리 정의된 아이콘을 개인화할 수 있습니다. Bear 를 사용하면 테마 색상에 따라 아이콘의 색상을 조정할 수 있습니다.
MLB 를 사용하면 사용자가 가장 좋아하는 팀을 시작 아이콘으로 선택할 수 있습니다.
시작 페이지는 사용자가 앱을 열 때마다 브랜드에 대한 인상을 깊게 하기 때문에 지속적인 마케팅 캠페인과 같습니다.
시작 페이지에 상징적인 슬로건이나 이미지를 추가하여 응용 프로그램의 사용을 강조할 수 있을 뿐만 아니라 사용자에 대한 기대치를 설정할 수 있습니다.
예를 들어, 위 그림의 세 가지 앱은 브랜드 로고를 오픈 페이지에 올려놓아 사용자의 감각을 직접적으로 자극했다.
역사, DocuSign (전자 서명 서비스), Ted 등 세 가지 어플리케이션은 시작 화면에 구호를 추가하여 가치 제안을 강화합니다.
아이콘 클릭부터 콘텐츠 로드까지 감지 가능한 로드 시간이 있습니다. 이 기간 동안 적절한 애니메이션을 추가하면 제품 상태를 미리 알 수 있습니다.
위 그림의 세 app 는 모두 애니메이션을 사용하여 열린 화면 페이지와 컨텐츠 페이지 사이에 매끄러운 다리를 만듭니다.
구글, TinyFax, Cinamatic 과 같은 어플리케이션은 애니메이션을 사용하여 아이콘을 컨텐츠로 교묘하게 변환합니다.
마찬가지로 위의 세 app 에서 사용하는 애니메이션은 매우 정교하지는 않지만 초기 페이지에서 콘텐츠로의 전환도 가능합니다.
적용된 일부 동적 효과는 단순 상태를 유지하며 logo 는 위 그림과 같이 강조 표시로만 나타납니다.
복락치킨 패스트푸드점은 홈페이지에 힌트 애니메이션을 추가하여 사용자를 콘텐츠 페이지로 성공적으로 안내했다.
대부분의 응용 프로그램에서는 가벼운 응용 프로그램이 일반적으로 매우 빠르게 로드되고 뼈대 화면이 더 부드러운 경험을 얻을 수 있기 때문에 오픈 스크린과 뼈대 화면을 사용하는 것이 더 의미가 있습니다.
이러한 응용 프로그램은 마스터 페이지의 내용을 시작 페이지에 미리 로드하고 Breathe 는 마스터 내용과 유사한 색상 뼈대를 사용합니다. Transit (오른쪽) 은 지도의 골격을 시작 페이지로 사용하여 사용자가 로드한 후 직접 클릭할 수 있도록 합니다.
위 그림의 응용은 사전 로드와 애니메이션을 통해 시간을 파악함으로써' 곧 다가올 것' 이라는 느낌을 준다.
Snow, Dribbble 및 LaunchPro 는 이전 응용 프로그램에 비해 뼈대 상태를 거의 사용하지 않습니다.
일부 app 는 시작할 때 비디오나 오디오와 같은 많은 데이터를 로드해야 하기 때문에 로드하는 데 시간이 오래 걸립니다.
이러한 응용 프로그램의 경우 약간 긴 애니메이션이 더 의미가 있습니다. 데이터 캐시 및 로드 시간이 단축됨에 따라 애니메이션이 점점 짧아질 수 있습니다.
위 그림의 App 는 애니메이션을 사용하여 데이터를 로드하여 사용자에게 피드백 시간을 제공합니다.
Clashem, Tumbleweed, Chefsfeed 는 재미있는 애니메이션을 사용하여 데이터를 로드하고 브랜드 경험을 향상시킵니다.
이렇게 많은 사례를 보고 부트 화면이 얼마나 오래 나타날까요? 응용 프로그램 구성 및 데이터 로드에 필요한 시간을 고려해야 합니다.
다양한 사용 시간 및 사용자에 맞게 부팅 환경을 사용자 정의합니다.
각 단계의 사용자는 서로 다른 시동 경험을 가져야 합니다.
적절한 시작 페이지를 선택하기 전에 응용 프로그램의 크기를 고려합니다.
이미지로 정보를 전달하고, 애니메이션을 지향한다.
가능하면 고유 아이콘을 사용하여 브랜드를 홍보하십시오.
문장 께서 당신에게 뭔가를 얻을 수 있기를 바랍니다 ~
멋진 추천:
1, 카드 디자인의 적용에 대해 이야기하십시오.
사례 연구: 그리드 시스템 레이아웃 설계.
어두운 패턴을 디자인하는 방법? 이 세 가지 요소 모두 고려해야 한다.
깊이 분석: 서비스 청사진의 응용 논리 설계.