1 / 47

스타사인 Guideline for Android (480x800)

스타사인 Guide for iphone(320X480) 2013.03.31 Updated. 스타사인 Guideline for Android (480x800). 2013. 3 . 1 1 Updated. Document History. 스타사인 Guideline for iphone. 0.intro. 스타사인 Guideline for iphone. BG 이미지 사이즈는 가로 기준으로 세로 사이즈를 가변으로 삽입

regan-kline
Download Presentation

스타사인 Guideline for Android (480x800)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 스타사인 Guide for iphone(320X480) 2013.03.31 Updated. 스타사인 Guideline for Android (480x800) 2013.3.11 Updated

  2. Document History 스타사인 Guideline for iphone

  3. 0.intro 스타사인 Guideline for iphone BG 이미지 사이즈는 가로 기준으로 세로 사이즈를 가변으로 삽입 가로기준:720(720x1280) 고해상도, 480(480x853) 최적화 사이즈 Crop은 TOP기준, 하단의 이미지가 남는 방식. Default.png Default@2x.png Default-568h@2x.png

  4. 1.1.login 스타사인 Guideline for iphone 64 input_login.png (66,227) 188 x 37 input_login.png (66,264) 188 x 37 img_intro_logo.png /@2x.png (Center,64) 188 x 163 38 Type 1 38 44 btn_login.png / _press.png (66,301) 188X40 Type 1 Helvetica regular 16px ,(204,204,204-입력전) (102,102,102-입력후), center img_login_bg.jpg img_login_bg@2x.jpg img_login_bg~568h@2x.jpg

  5. 1.1.confirm 스타사인 Guideline for iphone 66 66 60 btn_resend.png / _press.png (19,227) 57 x 37 input_confirm.png (66,227) 131 x 37 Type 1 38 44 btn_confirm.png / _press.png (66,265) 188 x 40 Type 1 Helvetica regular 16px ,(204,204,204-입력전) (102,102,102-입력후), center 10

  6. 2.2.statics_artist 스타사인 Guideline for iphone 나눔고딕 레귤러 18px (center,14) 3에서는 컨텐츠가 잘리게되며 스크롤뷰를 사용. scroll viewheight : 372, contents height : 460 14 (0,0) 44 44 XX bg color : (105,173,212) XX x 44 btn_press_black.png 46 x 44 버튼의 경우 이 이미지로 덮어주세요 btn_close.png 46 x 44 img_static_title_artist.png (15,59) 53x 45 tab_artist_normal.png/ tab_artist_press.png Bottom 160 x 44 tab_business_normal.png/ tab_business_press.png Bottom 160 x 44 10

  7. 2.2.statics_artist 스타사인 Guideline for iphone 14 44 69 73 18 Text box (305,146) 43x18 Helvetica regular 18px,10px ,(60,138,217),right middle img_static_group.png (71,116) 234x30 16 Text box (262,146) 43x18 Helvetica regular 18px,10px ,(223,78,78),right middle Text box (71,146) 69x18 나눔고딕 볼드 13px (68,68,68)left middle 9 9 graph_bar_bg.png 73X9 graph_bar_red.png 1x9 graph_bar_blue.png 1x9

  8. 2.2.statics_artist 스타사인 Guideline for iphone 14 44 (71,396) img_photo_mask.png 47X29 8 (71,458) 47 47 Mask (80,396)(127,396)(173,396)(220,396) (266,396) 29x 29 Text box (47x26) 나눔고딕 볼드 11px ,(68,68,68), center top Text box 47x12 Helvetica bold 13px ,9px, (153,153,153), center top img_static_indivisual.png (71,338) 234x58

  9. 2.2.statics_business 스타사인 Guideline for iphone 14 img_static_title_business.png (15,59) 53x 45 44 img_static_bar_business.png (71,103) 234x30 나눔고딕 볼드 13px ,(226,78,78), left center 69 73 Helvetica regular 18px ,(223,78,78),right middle 23 23 Helvetica regular 18px ,(60,138,217),right middle 1 나눔고딕 볼드 13px ,(63,140,219), left center 17 img_static_bar.png (71,195) 234x19 23 23 graph_bar_bg_large.png 73X23 graph_bar_blue_large.png 1x23 graph_bar_red_large.png 1x23

  10. 2.2.Home 스타사인 Guideline for iphone 나눔고딕 볼드 15px255, 255, 255 (51, 섬네일 이미지의 가운데 정렬) 10 5 5 46 4 44 44 4 bg color : (242,139,139) XX x 44 img_photo_mask2.png (10,4) 36x36 226 btn_press_black.png 46 x 44 버튼의 경우 이 이미지로 덮어주세요 btn_close2.png 46 x 44 img_drop_btn.png (x=가변,y=섬네일 이미지의 가운데 정렬) 8x5 129 tab_bg_home.png Bottom 274x 44 1 104 tab_cmt_btn.png X=274, Bottom 46x44 44

  11. 2.2.Home 스타사인 Guideline for iphone iphone5 14 64 14 14 64 14 (0,0) (14, 81) (94, 81) Ubuntu Titling Bold 42px Off (255,255,255) On (165,36,36) left middle Size 195x37 (94, 125) (255, 125) 226 Size 160x22 btn_sratsign_on/off.png (14, 81) 64x67 14 64 14 나눔고딕 레귤러 18px Off (255,255,255) On (165,36,36) left middle other (0,0) (14, 35) (94, 35) img_starsign_done_normal.png img_starsign_done_press.png (255,125) 18x19 Size 195x37 (94, 79) (255, 79) Size 160x22

  12. 2.2.Home 스타사인 Guideline for iphone Cell (90,27) , 200x78 (0,0) 셀 간 23px의 간격을 유지하고 옆으로 반복 1 btn_msg_on/off.png (14, 27) 64x67 Divide line(0,129) img_home_line.png 320x1 Text box (0,0) Ubuntu Titling Bold 18px ,(68,68,68), left center 82x17 129 Divide line (111,6) img_home_titleline.png 90x3 1 Text box (0,26) 나눔고딕 regular 13px ,(51,51,51),left top 200x33 Text box (0,64) 나눔고딕 regular 12px ,(170,170,170),left top 200x16

  13. 2.2.Home 스타사인 Guideline for iphone Cell (90,24) , 200x56 (0,0) 셀 간 23px의 간격을 유지하고 옆으로 반복 btn_scd_on/off.png (14, 18) 64x67 Text box (0,0) Ubuntu Titling Bold 18px ,(68,68,68), left center 82x17 Divide line (111,6) img_home_titleline.png 90x3 (0,0) 104 12 6 9 Text box (0,26) 나눔고딕 regular 13px ,(51,51,51),left top200x33

  14. 2.3.Home_artist list 스타사인 Guideline for iphone * Top type1 Text box (10,13) Ubuntu Titling Bold 21px ,(85,85,85), left center 58x19 img_home_dropbg.png (0,0) 320x45 Top 45 (0,0) 45 326 스크롤영역 281 btn_home_stat_on/off.png (255,9) 58x27 List * Top type2 Text box (32,13) 나눔고딕Bold 14px ,(85,85,85), left center 276x19 (0,0) 45 img_home_dropback.png (8,13) 19x19

  15. 2.3.Home_artist list 스타사인 Guideline for iphone * List type1 Text box (10,13) 나눔고딕Bold 14px ,(153,153,153), left center 278x19 img_home_dropbg.png (0,0) 320x45 (0,0) 45 Top 45 * List type2 Text box (10,13) 나눔고딕Bold 14px ,(237,126,126), left center 278x19 img_home_dropbg_press.png (0,0) 320x45 326 스크롤영역 281 List (0,0) 45 img_home_dropselect.png (293,12) 19x19 320x178(R0, G0, B0) 투명도 50% * List type3 Text box (10,13) 나눔고딕Bold 14px ,(153,153,153), left center 278x19 img_home_dropenter.png (293,12) 19x19 img_home_dropbg.png 320x45 (0,0) 45

  16. 3.1.Starsign_dropdown 스타사인 Guideline for iphone 나눔고딕Bold 18px ,(255,255,255), (243,137,137) center 320x45 (0,0) 45 45 img_title_dropbg.png (0,0) 320x45 나눔고딕Bold 14px ,(187,187,187),center 320x45 스크롤영역 281 img_title_dropbg2.png 320x45 나눔고딕Bold 14px ,(187,187,187),center 320x45 img_title_dropbg3.png 320x45

  17. 3.1.Starsign_total 스타사인 Guideline for iphone bg color : (242,139,139) XX x 44 나눔고딕18px255, 255, 255 320x44 (0,0) (0,0) 62 Press 46 x 44 #000000 투명도 85% Btn_detail.png 46 x 44 btn_back.png 46 x 44 btn_starsign_prev_on/off.png (196,15) 54x25 btn_starsign_next_on/off.png (251,15) 54x25 img_starsign_titleline.png (15,15) 54x2 (0,0) img_starsign_naviline.png (250,15) 1x25 Text box (15,23) 54x22 Ubuntu titling 27pt bold (124,124,124) left center 나눔고딕 11px(85,85,85) 54x14 (15,48) left center

  18. 3.1.Starsign_total 스타사인 Guideline for iphone btn_starsign_total_on/off.png (71,0) 234x30 나눔고딕 13px(85, 85, 85) 200X30 (80,0) (0,0) img_starsign_unit.png (274,8) 31x10 30 21 2 (0,0) img_starsign_total_divideline.png (0, 21) 320x2 (0,0)

  19. 3.1.Starsign_total 스타사인 Guideline for iphone Cell (71,8) 234x23 셀 간 6px의 간격을 유지하고 아래로 반복 (0,0) Text color (60,138,217) Text color (64,124,185) 셀과 구분선과의 간격 14px 구분선과셀과의 간격 8px Text color (85,85,85) Text color (85,85,85) 나눔고딕 Bold 13px(190,72,72) (0,0) 62x23 left center Helvetica Regular13px(223,78,78) (149,0) 85x23 right center (0,0) 스크롤영역 Iphone5 307 그 외 219 2graph_bar_red.png (69,5) 1x8 2graph_bar_blue.png (69,5) 1x8 2graph_bar_bg.png (69,5) 73x8

  20. 3.1.Starsign_total 스타사인 Guideline for iphone 나눔고딕 Bold 13px(85,85,85) (0,0) 62x23 left center Helvetica Regular13px(223,78,78) (149,0) 85x23 right center (0,0) 2graph_bar_red_large.png (69,5) 1x15 2graph_bar_blue_large.png (69,5) 1x15 2graph_bar_bg_large.png (69,5) 73x15 스크롤영역 Iphone5 307 그 외 219

  21. 3.1.Starsign_total 스타사인 Guideline for iphone img_starsign_equalline.png (71,0) 234x1 나눔고딕12px(85,85,85) (259,5) 62x23 left center (0,0) Helvetica Regular13px(102,102,102) (71,5) 70x14 left center img_starsign_check.png (245,5) 14x14 38

  22. 3.1.Starsign_total 스타사인 Guideline for iphone img_starsign_unit.png (274,8) 31x10 (0,0) img_starsign_total_divideline.png (0, 21) 320x2 (0,0) 62 21 2 img_starsign_line.png (0, 0) 320x1 스크롤영역 Iphone5 337 그 외 249 (0,0) Btn_total_on/ff.png (131,7) 86x32 Btn_history_on/off.png (219,7) 86x32 46

  23. 3.1.Starsign_total 스타사인 Guideline for iphone 나눔고딕 Bold 13px(190,72,72) (71,9) 53x17 left center Helvetica13px(224,87,87) (195,9) 110x17 right center 85 (0,0) 나눔고딕 Bold 13px(64,124,185) (71,31) 53x17 left center Helvetica13px(73,144,217) (195,31) 53x17 right center 스크롤영역 Iphone5 383 그 외 295 나눔고딕 Bold 13px(51,51,51) (71,61) 53x17 left center Helvetica13px(102,102,102) (195,61) 53x17 right center img_starsign_equalline.png (71,54) 234x1

  24. 3.1.Starsign_total 스타사인 Guideline for iphone img_starsign_total_divideline.png (71,0) 234x2 (0,0) 85 Cell (71,34) 234x43 셀 아래로 반복 101 나눔고딕 Bold 10px(85,85,85) (228,9) 77x17 right center img_starsign_total_divideline2.png (71,134) 234x1 나눔고딕 Bold 13px(85,85,85) (0,5) 53x17 left center Helvetica13px(73,144,217) (124,5) 53x17 right center 282 (0,0) Helvetica12px(187,187,187) (124,22) 53x17 right center img_starsign_total_divideline2.png (0,42) 320x1

  25. 3.1.Starsign_total 스타사인 Guideline for iphone img_starsign_tabbg.png (0,0) 320x35 btn_tab_income_on/off.png (131,8) 86x27 (0,0) 62 btn_tab_spend_on/off.png (219,8) 86x27 35 7 나눔고딕14px(51,51,51) (24,14) 95x51 left top 나눔고딕 Bold 11px(153,153,153) (129,14/32/50) 46x15 left top Helvetica 12px(73,144,217) (185,32) 92x15 right center 스크롤영역 Iphone5 310 그 외 222 BG (0,0) BG color (237,237,237) 셀 간 6px의 간격을 유지하고아래로 반복 Cell (0,0) 320x79 img_starsign_total_bg_normal.png img_starsign_total_bg_press.png Helvetica 12px(224,87,87) (185,14/50) 92x15 right center

  26. 3.2.Starsign_summary 스타사인 Guideline for iphone bg color : (242,139,139) XX x 44 나눔고딕18px255, 255, 255 320x44 (0,0) (0,0) Press 46 x 44 #000000 투명도 85% btn_back.png 46 x 44 Text box (9,0) 302x24 Ubuntu titling 15pt bold (255,255,255) left center img_subtitle_bg.png (0,0) 320x24 (0,0)

  27. 3.2.Starsign_summary 스타사인 Guideline for iphone BG 320x77 Normal (243,243,243) press (240,240,240) (0,0) img_list_cue.png (301,29) 11x20 Text box (9,11) 265x14 Helvetica12pt (170,170,170) Left center Divide line (0,77) 320x1 (211,211,211) Text box (9,28) 265x21 나눔고딕 15pt (51,51,51) Left center Text box (9,51) 265x17 나눔고딕 12pt (102,102,102) (223,78,78) Left center 하나의 셀을 78px씩 반복

  28. 3.2.Starsign_detail 스타사인 Guideline for iphone BG 320x372 Iphone5 640x920 (223,223,223) (0,0) img_detail_top.png (9,9) 302x22 Text box (24,47) 272x52 나눔고딕 20pt (51,51,51) Left top Text box (24,99) 272x18 Helvetica14pt (153,153,153) Left center 스크롤 영역 272x221 Iphone5 544x618 (24,128) BG 320x325 Iphone5 604x826 (255,255,255) img_detail_tail.png (9,356) iphone5 (18,888) 302x7

  29. 3.2.Starsign_detail 스타사인 Guideline for iphone Text box (0,0) 77x34 나눔고딕 bold14pt (249,91,91) Left center 하나의 셀을 34씩 반복 (0,0) Text box (105,0) 167x34 나눔고딕 14pt (51,51,51) Right center img_starsign_detail_line.png (77,0) 28x34

  30. 3.5.Starsign_Search 스타사인 Guideline for iphone bg color : (242,139,139) XX x 44 나눔고딕18px255, 255, 255 320x44 (0,0) (0,0) Press 46 x 44 #000000 투명도 85% Btn_chat_close.png 46 x 44 Text box (44,45/ 208,45) 63x13 나눔고딕 bold12pt (119,119,119) Center middle img_search_title_01.png(20,15) 46x13 Left center (0,0) btn_search_date_on/off.png (20,35 / 177,35) 123x33 img_search_squiggle.png (154,47) 13x7

  31. 3.5.Starsign_Search 스타사인 Guideline for iphone img_search_title_02.png(20, 80) 46x13 Left center btn_search_category_on/off.png (20,100) 280x33 Text box (41,110) 238x13 나눔고딕 bold12pt (119,119,119) Center middle (0,0) img_search_title_03.png(20, 145) 73x13 Left center btn_search_on/off.png (20,220) 280x43 btn_search_tab_03_normal/press.png (207,165) 94x33 btn_search_tab_01_normal/press.png btn_search_tab_02_normal/press.png (20,165 / 114,165 ) 93x33

  32. 4.1.Schedule_list 스타사인 Guideline for iphone bg color : (140,111,213) XX x 44 나눔고딕18px255, 255, 255 320x44 (0,0) (0,0) Press 46 x 44 #000000 투명도 85% btn_back2.png 46 x 44 Btn_calendar.png 46 x 44 Btn_refresh.png 46 x 44 Text box (9,0) 302x24 Ubuntu titling 15pt bold (255,255,255) left center img_subtitle_bg.png (0,0) 320x24 (0,0)

  33. 4.1.Schedule_list 스타사인 Guideline for iphone Stretchable 1 img_scd_bg.png (9,11) 27x20 img_scd_pastbar.png (9,11) 최소12x20 최대 27x20 img_scd_presentbar.png (9,11) 최소12x20 최대 27x20 • 38 • Fix BG 320x77 (255,255,255) (0,0) Text box (36,11) 266x20 나눔고딕15pt 지난 스케줄 (153,153,153) 현재스케줄 (89,48,191) 예정 스케줄 (51,51,51) Left center Text box (36,31) 266x16 Helvetica12pt 지난 스케줄 (204,204,204) 현재스케줄 (140,111,213) 예정 스케줄 (170,170,170) Left center Divide line (0,61) 320x1 (211,211,211) 하나의 셀을 62px씩 반복 * 지난 스케줄 * 현재 or 다가올 스케줄 * 지난 종일 스케줄 * 현재 or 다가올 종일 스케줄

  34. 4.1.Schedule_list_view more 스타사인 Guideline for iphone BG 320x372 Iphone5 640x920 (223,223,223) (0,0) img_scd_detail_top.png (9,9) 302x22 Text box (24,47) 272x52 나눔고딕 20pt (51,51,51) Left top Text box (24,99) 272x18 Helvetica14pt (153,153,153) Left center 스크롤 영역 272x261 Iphone5 544x698 (24,128) BG 320x360 Iphone5 604x896 (255,255,255) img_detail_tail.png (9,391) iphone5 (18,958) 302x7

  35. 4.1.Schedule_list_view more 스타사인 Guideline for iphone Text box (0,6) 245x20 Helvetica12pt (102,102,102) Right center (0,0) img_scd_bg.png (245,6)27x20 (0,43) 하나의 셀을 8px 마진을 두고 반복 img_scd_detail_line.png (xx,0) XXx20 (x=94 고정) (0,0) 5 5 Text box (132,0) 178xYY 나눔고딕 14pt (85,85,85) Left top Text box (0,0) XXx20 나눔고딕 bold 14pt (51,51,51) Left center

  36. 4.2.Schedule_calendar 스타사인 Guideline for iphone bg color : (140,111,213) XX x 44 나눔고딕18px255, 255, 255 320x44 (0,0) (0,0) Press 46 x 44 #000000 투명도 85% btn_back2.png 46 x 44 Btn_list.png 46 x 44 btn_scd_back_on/off.png (9,16) 83x33 btn_scd_next_on/off.png (228,16) 83x33 Text box (92,16) 136x18 Ubuntu titling 26pt (119,119,119) center (0,0) Text box (92,39) 136x12 Ubuntu titling 13pt (204,204,204) center

  37. 4.2.Schedule_calendar 스타사인 Guideline for iphone (0,0) img_scd_sat.png (276,70) 44x13 img_scd_sun.png (0,70) 46x13 img_scd_mon.png (46x70) 46x13 img_scd_tue.png (92x70) 46x13 img_scd_wed.png (138x70) 46x13 img_scd_thu.png (184,70) 46x13 img_scd_fri.png (230,70) 46x13

  38. 4.2.Schedule_calendar 스타사인 Guideline for iphone • 캘린더의 가장 밑줄 (y=362)용 소스가 한벌 더 있습니다. (하단 라인의 컬러 차이) bg_cal_dimed.png (0,83) 46x43 bg_cal_dimed_sat.png (0,276) 44x43 (0,0) bg_cal_noraml.png (0,83) 46x43 bg_cal_noraml_sat.png (0,276) 44x43 bg_cal_today.png (0,83) 46x43 bg_cal_today_sat.png (0,276) 44x43 (0,0) (11,13) (19,13) img_scd_bar.png img_scd_bar_today.png (3,13) 24x7 Day Text (2,3) 13x9 / Helvetica 9pt left top 지난달 - (170,170,170) 이번달 노멀 - (85,85,85) 오늘 - (255,255,255) img_scd_more.png img_scd_today_more.png (화이트컬러) (29,34) 14x4 img_scd_dot.png img_scd_dot_today.png (3,22) 8x7 (11,22) (19,22)

  39. 4.2.Schedule_calendar 스타사인 Guideline for iphone (0,0) (0,404) * p.12 스케줄 리스트용 가이드와 동일

  40. 5.Message_list 스타사인 Guideline for iphone bg color : (234,129,92) XX x 44 나눔고딕18px255, 255, 255 320x44 (0,0) (0,0) Press 46 x 44 #000000 투명도 85% btn_back3.png 46 x 44 Text box (9,0) 302x24 Ubuntu titling 15pt bold (255,255,255) left center img_subtitle_bg.png (0,0) 320x24 (0,0)

  41. 5.Message_list 스타사인 Guideline for iphone BG 320x77 Normal (243,243,243) press (240,240,240) (0,0) img_list_cue.png (301,29) 11x20 Text box (9,11) 280x14 Helvetica12pt (170,170,170) Left center Divide line (0,61) 320x1 (211,211,211) Text box (9,28) 280x21 나눔고딕 15pt (51,51,51) Left center Text box (9,51) 280x17 나눔고딕 12pt (136,136,136) Left center 하나의 셀을 78px씩 반복

  42. 5.Message_list_view more 스타사인 Guideline for iphone (0,0) Img_msg_detail_top.png (9,9) 302x22 스크롤 영역 272x221 Iphone5 544x618 (24,128) img_detail_tail.png (9,356) iphone5 (18,888) 302x7

  43. 5.Message_list_view more 스타사인 Guideline for iphone 이미지 삽입시 width가 272이상이면 기존 비율을 유지하고 width 272에 맞춰 리사이징 Width가 272보다 작을 시 좌측 상단 기준으로 정렬 (0,0) 컴포넌트 간 간격10px Text box (0,yy) 272xYY 나눔고딕 14pt (85,85,85) Left top

  44. 6.Chat 스타사인 Guideline for iphone 9 216 img_chat_photo_mask.png (0,20) 36x36 Text box (82,0) 134x10 나눔고딕 Bold9pt (205,180,180) Right middle (0,0) 10 Text box (51,29) width max :152 나눔고딕 Bold13pt (85,85,85) Left top Text box (0,60) 36x9 나눔고딕 Bold9pt (242,139,139) Center middle balloon_read_left.png (42,20) 30x23 Width max :174 9 13 Stretchable 1 Fix 23 6 9 6 1 16 20

  45. 6.Chat 스타사인 Guideline for iphone 9 img_chat_photo_mask.png (180,20) 36x36 216 Text box (0,0) 134x10 나눔고딕 Bold9pt (205,180,180) left middle (0,0) Text box (180,60) 36x9 나눔고딕 Bold9pt (242,139,139) Center middle Text box (11,29) width max :152 나눔고딕 Bold13pt (85,85,85) Left top balloon_read_right.png (0,20) 30x23 Width max :174 9 13 Stretchable 1 Fix 6 23 9 6 1 16 20

  46. 6.Chat 스타사인 Guideline for iphone img_chat_inputbg.png (9,6) 225x73 btn_chat_send_nor/press.png (240,6) 71x73 (0,0) img_chat_bg.png (bottom) 320x85 Width max :174 Text box (시작 좌표 19,13) 205xXX 나눔고딕 Bold13pt (85,85,85) Left top BG 영역에서 텍스트 스크롤 Iphone3 스크롤 영역 height 116 Iphone5 스크롤 영역 height 204 85

  47. 7.loading 스타사인 Guideline for iphone 132 131 57 (0,0) 280 loading_ani1.png loading_ani2.png loading_ani3.png . . loading_ani9.png (131,280) 57X57 aling-center, middle 57

More Related