panduan penggunaan

elemen grafis

KOLABORAPI • BEM ITS

PERIODE 2019
DARI KOMINFO
UNTUK SEMUA

MOHON DIBACA,
DIPAHAMI,
DAN DIPATUHI
DENGAN SEKSAMA
Gunakan TEMPLATE yang telah disediakan*

Gunakan ADOBE ILLUSTRATOR CC

dan ADOBE PHOTOSHOP CC
untuk hasil yang maksimal

Nggak apa-apa revisi ya,

Kan biar oke posternya :)

Tetap semangat!

*Eksplorasi layout diperbolehkan

dengan proses asistensi
DAFTAR ISI
B A G IA N 1
AT U R A N D A S A R

B A G IA N 2
P R OS E D U R P E N GGUNAAN

B A G IA N 3
LA IN -L A IN
BAGIAN 1
U K U R A N G R ID

WA R N A

L OGO

TEKS

E L E ME N GR A F IS

F OTO
BAGIAN 1 UKURAN GRID

UKURAN GRID
1

UKURAN POSTER
Ukuran poster adalah PO T R AI T sesuai dengan
template yaitu 1000px X 12 5 0 px

GRID
Gunakan area grid No.1 unt u k m e l e t a k k a n l o g o
Gunakan area grid No.2 unt u k m e l e t a k k a n k o n t e n

Dilarang meletakkan konten d i l u a r g r i d N o . 2

Sembunyikan grid (garis putus-putus) sebelum

diexport

01
BAGIAN 1 WARNA

WARNA

F07522

EB4440

CA2842

7C1436

4A1131

2C162A

25314E

FFFFFF E4DADF

WARNA BACKGROUND
Warna background utama p o s t e r a d a l a h 2 C 1 6 2 A

WARNA TEXT
Warna text judul adalah FF F F F F
Warna text sub judul adalah EB 4 4 4 0
Warna text poin-poin adalah E B 4 4 4 0
Warna text isi (bodytext) ad a l a h F F F F F F
Warna text keterangan adal a h FFFFFF

Selain warna yang disebut k a n h a n y a d i g u n a k a n

pada logo

02
BAGIAN 1 LOGO

LOGO

1 2

lorem ipsum
doloR SIT

Lorem ipsum dolor sit down and relax . . .

lorem ipsum dolor shit happens. lorem

ipsum dolor shit happenss.

arek.its.ac.id/bem-its
arek.its.ac.id/bem-its @bem_its
@bem_its

POSISI LOGO
Peletekkan logo TIDAK DAPAT D I U B A H

JENIS LOGO
Logo no1 merupakan logo IT S d a n l o g o k a b i n e t
Logo no2 merupakan logo k e m e n t r i a n a t a u l o g o d i v i s i
Logo no3 merupakan logo lai n - l a i n

03
BAGIAN 1 LOGO

logo kabinet

LOGO UKURAN BESAR

Logo ukuran besar mengguna k a n l o g o g r a m ( g a m b a r )
dan logotype (huruf) un t u k k e p e r l u l a n k h u s u s .
Ukuran logo besar lebar min i m a l 5 c m .

*Ukuran tinggi menyesuaika n

**Logotype juga dapat diletak k a n d i s a m p i n g l o g o

LOGO UKURAN KECIL

Logo ukuran kecil hanya m e n g g u n a k a n l o g o g r a m
(gambar). Tinggi logo ukuran k e c i l m i n i m a l 2 c m .

*Ukuran lebar menyesuaikan

04
BAGIAN 1 LOGO

WARNA LOGO
Pada warna dasar ge l a p # 2 C 1 6 2 A, logo
menggunakan warna monoc h r o m e # E4 D A D F ( b u k a n
putih) atau warna #EB4440 U N T U K K E G U N A A N
KHUSUS.

Pada warna dasar putih a t a u # E4 D A D F ( b u k a n

putih), logo menggunakan w a r n a f u l l c o l o r.

05
BAGIAN 1 LOGO

logo kementerian

UKURAN LOGO KEMENTERIAN

Ukuran logo kementerian pa d a t e m p l a t e i n s t a g r a m
dengan height 1.3cm dan w i d h t m e n y e s u a i k a n .

Ukuran logo kementerian pa d a t e m p l a t e i n s t a g r a m

story dan broadcast line de n g a n he i g h t 1 c m d a n
widht menyesuaikan.

WARNA LOGO KEMENTERIAN

Pada warna dasar gelap gun a k a n w a r n a # EB 4 4 4 0 .
Pada warna dasar terang gun a k a n w a r n a # 2 C 1 6 2 A .
Pada background foto guna k a n w a r n a # E4 D A D F.

06
BAGIAN 1 LOGO

logo sop

Lorem ipsum dolor sit down and relax . . .

Lorem ipsum dolor sit down and relax . . .

arek.its.ac.id/bem-its
arek.its.ac.id/bem-its @bem_its
@bem_its
arek.its.ac.id/bem-its @bem_its

Jika ada tambahan Logo SO P m a k a d i l e t a k k a n d a l a m

grid satu sejajar dengan lo g o k a b i n e t d e n g a n r a s i o
ukuran yang sama.

Logo SOP tidak boleh lebih b e s a r d a r i l o g o k a b i n e t

dan logo ITS.

Logo SOP ditampilkan menggunakan warna

monochrome #E4DADF (buk a n p u t i h ) .

07
BAGIAN 1 LOGO

logo lain-lain

lorem ipsum
doloR SIT

Lorem ipsum dolor sit down and relax . . .

lorem ipsum dolor shit happens. lorem

ipsum dolor shit happenss.

arek.its.ac.id/bem-its
arek.its.ac.id/bem-its @bem_its
@bem_its

Logo Lain adalah logo dari o r g a n i s a s i a t a u k e g i a t a n

lain yang dipost atau direpo s t .

Logo Lain menggunakan war n a a s l i l o g o , d i l e t a k k a n

sesuai dengan TEMPLATE ( d i d a l a m k o t a k ) .

08
BAGIAN 1 TEKS

TEKS
Berikut ini merupakan jeni s f o n t y a n g d i g u n a k a n
dalam standar grafis BEM ITS K O L ABO R API :

INTRO REGULAR
INTRO REGULAR

Digunakan untuk TEKS JUD U L

Size: 60 pt
Mode: Fill, Stroke (1 pt)
Color: #2C162A for light bac k g r o u n d
Color: #FFFFFF for dark back g r o u n d
Leading: Auto
Tracking: 0 *adjustable for so m e t e m p l a t e

Pangram Black
PANGRAM BLACK

Digunakan untuk TEKS SUB J U D U L

Size: 40 pt
Mode: Fill
Color: #EB4440
Leading: Auto
Tracking: 0

09
BAGIAN 1 TEKS

Helvetica Regular
HELVETICA REGULAR

Digunakan untuk TEKS ISI

Size: 17 pt
Mode: Fill
Color: #2C162A for light bac k g r o u n d
Color: #FFFFFF for dark back g r o u n d
Leading: Auto
Tracking: 0

Helvetica Bold
HELVETICA BOLD

Digunakan untuk TEKS KET ER A N G A N D A N P O I N

Size: 21 pt
Mode: Fill
Color: #EB4440 for highligh t ( e x . C P) a n d p o i n t
Color: #FFFFFF for descripti o n
Leading: Auto
Tracking: 0

10
BAGIAN 1 ELEMEN GRAFIS

ELEMEN GRAFIS

11
BAGIAN 1 ELEMEN GRAFIS

TYPOGRAPHY BACKGROUND
Typography background ini d i g u n a k a n s e b a g a i
elemen estetika yang diletak k a n p a d a b a c k g r o u n d
template.

Elemen ini berupa huruf K - L - B - R - P d e n g a n

mode stroke (2 pt), fill dan k o m b i n a s i .

Elemen ini dietakkan di belak a n g e l e m e n g r a f i s

lainnya.

Elemen ini tidak boleh diubah , d i t a m b a h , a t a u d i

kurangi peletakannya di seti a p t e m p l a t e y a n g t e l a h
disediakan.

Menggunakan warna #7C1437 d e n g a n o p a c i t y 7 5 %.

CIRCLE ELEMENTS
Elemen lingkaran ini digunak a n s e b a g a i ‘ b u l l e t s ’
untuk menghighlight poin pad a t e k s .

Elemen ini diletakkan dibelak a n g t e x t p a d a

template.

Menggunakan warna #7C1437 d e n g a n o p a c i t y

100%.

12
BAGIAN 1 FOTO

FOTO
1 2

COLOR PRESET
Color preset pada foto died i t d e n g a n m e n g g u n a k a n
aplikasi ADOBE PHOTOSHOP.

Foto menggunakan adjust m e n t B l a c k &W h i t e (1)

dengan adjustment gradient m a p ( 2 ) d i a t a s n y a .

Gradient Map Color Code:

#25314E
#4A1131
#CA2842

Slider gradient dapat diatu r ( 3 ) d a n d i s e s u a i k a n

dengan gelap terang foto yan g d i g u n a k a n .

13
BAGIAN 1 FOTO

1 2

CUT OUT IMAGE

Foto dipotong mengikuti be n t u k o b j e k y a n g i n g i n
digunakan dengan backgroun d o b j e k t r a n s p a r a n .

Cut out image ‘full image’ N o. 1 d e n g a n b e n t u k u t u h .

Cut out image ‘partial image ’ N o. 2 d i t a m b a h k a n

gradient warna background s e h i n g g a t e r l i h a t
‘blend in’

Cut out image dibuat dengan c o l o r p r e s e t y a n g s a m a

dengan full image.

14
BAGIAN 2
T E MP L AT E

L AY E R

EXPORT
BAGIAN 2 TEMPLATE

TEMPLATE
Tersedia berbagai macam va r i a n t e m p l a t e , g u n a k a n
sesuai dengan kebutuhan dan j e n i s k o n t e n .

Layout teks maupun elemen g r a f i s p a d a t e m p l a t e

TIDAK DAPAT DIUBAH*

Apabila konten lebih banya k d a r i r u a n g y a n g t e l a h

disediakan pada template, p o s i s i t e k s a t a u e l e m e n
grafis dapat diubah nam u n t i d a k b o l e h t e r l a l u
signifikan.

Apabila template yang ter s e d i a t i d a k m e m e n u h i

kebutuhan, dapat membua t t e m p l a t e b a r u d a r i
pengembangan template yan g t e l a h a d a .

Template yang dibuat harus d i a s i s t e n s i k a n s e b e l u m

diunggah.

*Dengan pengecualian. Ko n s u l t a s i k a n pada saat

asistensi.

JENIS TEMPLATE
Terdapat beberapa jenis tem p l a t e y a n g d a p a t
digunakan:

Template Cover
Template text with image
Template text only

Template Isi (untuk multip l e p o s t )

Template text with image
Template text only

16
BAGIAN 2 TEMPLATE

template cover

1 2 3

4 5 6

17
BAGIAN 2 TEMPLATE

COVER TEXT WITH IMAGE

Apabila konten poster yang d i b u a t t e r d i r i d a r i f o t o
dan teks, dapat menggunaka n t e m p l a t e b e r i k u t .

Template berikut dapat digun a k a n u n t u k s i n g l e p o s t

maupun multiple post sebaga i c o v e r.

Tempatkan foto sesuai deng a n l a y o u t p a d a t e m p l a t e .

Apabila poster tidak mem i l i k i k o n t e n p e n j e l a s a n

maupun keterangan tambah a n , t e k s d a p a t d i h a p u s .

Template No.1 juga dapat d i g u n a k a n s e b a g a i c o v e r

multiple post poster organ i s a s i a t a u k e g i a t a n l a i n
yang akan direpost.

Template No.3 dapat diguna k a n u n t u k p o s t e r y a n g

memiliki konten penjelasan y a n g b a n y a k .

Template No.5 digunakan k h u s u s u n t u k p o s t e r h a r i

besar.

Template No.6 digunakan u n t u k p o s t e r d e n g a n l o g o

lain-lain di dalam kotak.

18
BAGIAN 2 TEMPLATE

1 2 3

COVER TEXT ONLY

Apabila konten poster yang d i b u a t h a n y a t e r d i r i d a r i
teks, dapat menggunakan tem p l a t e d i a t a s .

Template berikut dapat digu n a k a n u n t u k s i n g l e p o s t

maupun multiple post sebag a i c o v e r.

Apabila poster tidak mem i l i k i k o n t e n p e n j e l a s a n

maupun keterangan tambaha n , t e k s d a p a t d i h a p u s .
Perhatikan jarak judul maup u n s u b j u d u l d e n g a n t e k s
berikutnya jika teks dihapus.

Template No.1 dapat digun a k a n u n t u k p o s t e r y a n g

memiliki konten penjelasan y a n g b a n y a k .

19
BAGIAN 2 TEMPLATE

template isi

1 2 3

4 5 6

20
BAGIAN 2 TEMPLATE

ISI TEXT WITH IMAGE

Apabila konten poster yang d i b u a t t e r d i r i d a r i f o t o
dan teks, dapat menggunak a n t e m p l a t e N o. 1 d a n
No.2

Template berikut digunaka n untuk multiple post

sebagai isi (swipe).

Tempatkan foto sesuai deng a n l a y o u t p a d a t e m p l a t e .

ISI TEXT ONLY

Apabila konten poster yang d i b u a t h a n y a t e r d i r i d a r i
teks, dapat menggunakan te m p l a t e N o. 3 , N o . 4 , N o. 5
dan No.6.

Template berikut digunaka n untuk multiple post

sebagai isi (swipe).

Template No.5 dan No.6 d a p a t d i g u n a k a n u n t u k

poster dengan konten tim e l i n e , p o i n p e n t i n g d a n
lain-lain.

21
BAGIAN 2 TEMPLATE

template instagram story

1 2 3 4

INSTAGRAM STORY
Template diatas digunakan u n t u k p o s t e r y a n g a k a n
diunggah pada instagram sto r y.

Ukuran template snapgram ad a l a h 7 2 0 p x x 1 2 8 0 p x .

Gunakan template dengan b a c k g r o u n d b e r w a r n a

gelap terlebih dahulu. Gun a k a n t e m p l a t e d e n g a n
background terang untuk p o s t e r d e n g a n a t e n s i
khusus/tertentu.

Apabila konten poster yang d i b u a t t e r d i r i d a r i f o t o

dan teks dapat menggunak a n t e m p l a t e N o. 1 , N o. 2
atau No.4.

Apabila konten poster yang d i b u a t h a n y a t e r d i r i d a r i

teks dapat menggunakan te m p l a t e N o. 3 . ( t e m p l a t e
ini juga tersedia dengan war n a t e r a n g )

Apabila poster yang dibuat t i d a k m e n y e r t a k a n l i n k

maka tulisan swipe up dapa t d i h i l a n g k a n .

22
BAGIAN 2 TEMPLATE

template broadcast line

1 2 3

BROADCAST LINE
Template diatas digunakan u n t u k p o s t e r y a n g a k a n
diunggah pada broadcast line .

Ukuran template broadcas t l i n e a d a l a h 1 0 0 0 p x x

1000px.

Gunakan template dengan b a c k g r o u n d b e r w a r n a

gelap terlebih dahulu. Gun a k a n t e m p l a t e d e n g a n
background terang untuk p o s t e r d e n g a n a t e n s i
khusus/tertentu.

Apablia konten poster yang d i b u a t t e r d i r i d a r i f o t o

dan teks dapat menggunakan t e m p l a t e N o. 1

Apabila konten poster yang d i b u a t h a n y a t e r d i r i d a r i

teks dapat menggunakan tem p l a t e N o . 2 a t a u N o. 3

Template broadcast line dig u n a k a n s e b a g a i h i g h l i g h t

untuk unggahan. Berikan han y a j u d u l d a n k e t e r a n g a n
singkat pada template ini y a n g s e l a n j u t n y a a k a n
diteruskan dengan link taut a n k e u n g g a h a n l a i n n y a
untuk info yang lebih lengkap .

23
BAGIAN 2 LAYER

LAYER

GRID
Untuk meletakkan dan m e n a m p i l k a n g r i d ( g a r i s
putus-putus) atau garis ban t u . ( s e m b u n y i k a n g r i d
sebelum diexport).

LOGO
Untuk meletakkan semua log o y a n g d i g u n a k a n p a d a
poster.

TEXT
Untuk meletakkan semua tek s y a n g d i g u n a k a n p a d a
poster.

FOTO
Untuk meletakkan semua fot o y a n g d i g u n a k a n p a d a
poster.

GRAFIS
Untuk meletakkan semua gra f i s y a n g d i g u n a k a n p a d a
poster.

BACKGROUND
Untuk meletakkan warna ba c k g r o u n d p o s t e r.

24
BAGIAN 2 LAYER

1
2
3

Layer diatas digunakan pada Ad o b e Ph o t o s h o p s a a t

memberikan color preset p a d a f o t o y a n g a k a n
digunakan dalam konten pos t e r.

NO.1
Untuk adjustment gradient m a p s e b a g a i c o l o r p r e s e t .

NO.2
Untuk adjustment black&whi t e .

NO.3
Untuk meletakkan foto yang a k a n d i e d i t .

Adjustment layer dapat dite m u k a n d i b a g i a n k a n a n

bawah Palette atau pada Men u L a y e r k e m u d i a n p i l i h
New Adjustment Layer.

25
BAGIAN 2 EXPORT

EXPORT
ADOBE ILLUSTRATOR

File - Export - Export As...

Save as type: JPEG (*JPG)

Use Artboards (v): Range, no m o r a r t b o a r d

Color Model: RGB

Quality: 10 (Maximum)
Resolution: Medium (150 pp i )

26
BAGIAN 2 EXPORT

ADOBE PHOTOSHOP

File - Export - Save for Web . . .

Preset: JPEG High

Quality: 60%
Optimized (v)

Format: Images Only

Settings: Default

27
BAGIAN 2 EXPORT

export khusus broadcast line

ADOBE ILLUSTRATOR

File - Export - Export for Scr e e n . . .

Select: Range (v), nomor ar t b o a r d

Export to: folder penyimpan a n
Formats: PNG

PASTIKAN SEMUA PO S T E R YA N G AKAN

DIEXPORT DAN DIPUBLIK A SI K A N D A L A M M O D E
RGB BUKAN CMYK.

28
BAGIAN 3
R E P OS T

R E QU E S T
BAGIAN 3 REPOST

REPOST
Setiap repost poster organis a s i a t a u p u n k e g i a t a n l a i n
harus mendapat izin terlebih d a h u l u .

Poster organisasi atau kegi a t a n l a i n a k a n d i r e p o s t

dengan multiple post menggu n a k a n c o v e r.

Cover dibuat sesuai denga n p a n d u a n d a n t e m p l a t e

penggunaan grafis BEM ITS K O L ABO R API .

Cover poster yang dibuat harus melalui proses

asistensi.

30
BAGIAN 3 REQUEST

REQUEST
SETIAP KEMENTERIAN B E M I T S K O L A B O R A PI
DIWAJIBKAN DAPAT MEMB U AT PO S T E R S E N D I R I
DENGAN KETENTUAN SESU A I YA N G TER D A PAT
PADA PANDUAN PENGG U N A A N G R A F I S ATA U
DENGAN MENGGUNAKA N T E M PLATE YA N G
SUDAH DISEDIAKAN.

SETIAP POSTER YANG DIB U AT H A R U S M ELA L U I

PROSES ASISTENSI.

Atau jika berhalangan:

Setiap Kementerian BEM ITS KO L A B O R A P I d a p a t

meminta untuk dibuatkan p o s t e r o l e h K O M I N F O
dengan syarat dan ketentua n :

Paling lambat H-7 sebelum p o s t e r a k a n d i u n g g a h

dengan mengirimkan konten p o s t e r y a n g a k a n d i b u a t .
Konten poster yang telah di k i r i m t i d a k d a p a t d i r e v i s i .

31
JANGAN LUPA
ASISTENSI YA :)
Terimakasih atas perhatiannya.

Semoga dapat membantu kalian semua.

Kalo bingung, tanya aja ya.

Semangat!!!