본문

아이콘 만들기

도입

이번 포스팅에서는 앱 디자인 관련 아이콘 제작에 대해 정리할 예정이다. 
앱에서 디자인은 굉장히 중요하다. 그 중에 아이콘은 사용자가 앱을 접하는 처음 이미지이다. 그래서 중요!
그런데 현실은 어떻게 해야할지 감이 안온다.


시도1 - Free 아이콘 사용

Google Material 사이트뿐 아니라 많은 사이트에서 Free 아이콘을 제공한다. 그 중에 찾은 사이트는 flaticon.com

 

Flaticon, the largest database of free vector icons

Download all icons in SVG, PSD, PNG, EPS format or as webfonts

www.flaticon.com

그 중에 flat, material Design이 적용된 아이콘을 찾기 위해 노력했다.. 하지만 찾기 너무 어려움.. 그래도 그나마 찾은 메타포이다.

https://www.flaticon.com/free-icon/music_416362

그러나, 내가 강조하고 싶었던 것은
비디오가 백그라운드에서 재생된다는 것을 강조하고 싶었다. 
그러나 그러한 메타포는 찾기 어려웠다.

그래서 다른시도를 하게되는데......

시도2 - 직접 만들기

그럼 직접 만들어야겠다. 포토샵이나 일러스트 잘 사용 못한다. 
그래서 Keynote로 만들기로 결정

Step1. 구글 리소스 사용하기

그림을 직접 그리면 망할 것이 뻔하다. 그러므로 구글 아이콘 가져다 쓰기 (원하는대로 색을 설정한 것이 함정!)

Step2. 스마트폰 그리기

심플하게 그리자

 

Step3. 합치기


적용

Step1. LaunchActivity 생성 및 리소스 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- launch_screen.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <item android:drawable="@color/grayBgColor" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_default" />
    </item>
</layer-list>
 
<!-- style.xml -->
<style name="LaunchTheme" parent="HeepieTheme">
    <item name="android:windowBackground">@drawable/launch_screen</item>
</style>
cs

스크린 샷

이쁜지는 모르겠지만 나의 의도를 표현해봤다..

 

 

#앱개발 #모바일앱개발 #어플개발

공유

댓글