nana johari

December 30, 2012

Photoshop : Simple blog header [full]



Macam atas ni ha ._.

Assalamualaikum.

Aku tak tahu lah ni yang diminta atau tak ._. aku pun tak berapa faham sebenarnya nak buat tutorial header yang penuh, tak transparent. Kalau ikutkan, nak buat header yang penuh, senang je ._. Cuma click kat bahagian new image tu, "white" tak transparent ._. nanti dia jadi tak transparent .

So, alang alang aku terus buat tutor nak buat header yang simple ._. Aku pernah pakai header macam ni dulu. Here,

First open Photoshop. Tak kira CS berapa pun. Tekan File > New > Width image ikut kebesaran blog masing-masing. Height ikut suka hati. Then tengok bahagian background contents, pilih White. Baru header tu tak transparent.


Lepas tu open gambar. Kalau nak senang, pastikan gambar tu backgroundnya satu warna, tak ada corak . Macam ada background blur ._. Senang sikit.

So bila dah upload, kecikkan dan adjust kedudukan ikut suka korang. Macam aku buat kat bawah ni.


Ikut apa yang aku buat dalam gambar di atas. Untuk bagi background sama warna dengan background gambar kita upload tadi. Pilih dropper tu, then click atas background image kita tadi. Lepas tu create new layer kat bahagian kanan bawah tu. Then click semula kat image di tengah-tengah. Macam bawah ni,


Pastikan layer yang dah fill dengan warna tu, di bawah layer gambar kita tadi. Macam atas ni.


Lepas dah puas hati dengan kedudukan, korang boleh merge layer. Buat macam di atas ni. Nak gabungkan layer gambar dengan layer background berwarna tadi. Untuk cantikkan or cerahkan warna gambar tu, korang boleh ikut step curve, exposure or level. Tekan Image > Adjustments. Kalau tak faham, ada kat list tutorial aku.

Then buat lah font. Nama blog dan so on ._.
Kalau nak tambah sikit design petak, macam aku buat kat contoh header atas sekali tu,
Ikut seperti yang di bawah.


Pastikan create new layer dulu, baru buat kotak garis putus-putus tu. Lepas tu korang just guna Fill Tool dan click kat dalam ruang kotak garis putus-putus tadi. Guna warna yang sama seperti warna background korang tadi.


Kemudian ubah mode layer petak tu kepada Multiply. Macam atas ni. So warna untuk petak tu jadi lagi gelap daripada background.


Dah siap, tekan File, Save as PNG.
Upload kat blog macam biasa. Kalau template designer, upload kat bahagian layout tu. Kalau blogskin, upload header korang kat Imgur.com dulu lepas tu ambik URL dia dan paste kat HTML blog korang.

Done

December 25, 2012

Photoshop : Simple fanfic poster I



.. romantic angst kot? slice of life? /confused/

Assalamualaikum.
Don't re-tutorial.

Tak payah nak bermukadimah lebih-lebih. Aku ni bila dah start mukadimah, langsung tak nampak cahaya penutupnya. So ni tutorial untuk poster jenis yang atas tu. Bagi aku poster macam ni quite simple, sebab tak payah risau pasal merge itu ini, comot ke tak ke, sebab aku tak guna eraser langsung untuk yang ni. Tapi poster jenis macam ni kena accurate sikit haha ._. since involving petak petak dan petak ._.

First macam biasa, open Photoshop yang tak kira CS berapa pun. Tekan File > New > Create new image, suka hati nak pakai berapa kebesarannya . Tapi pastikan semua nombor bulat .. maksud aku , tak macam ni 465 px ._. buat macam ni 350, 550, 600, or macam tu ._. Senang.


Create new layer macam atas ni lepas tu fill kan dengan warna. Pastikan warna lembut ._. Lepas tu boleh open image yang korang nak guna.

Ehem. Untuk poster empat gambar ni, aku cadangkan dua gambar watak, dua gambar scenery, pegang tangan or something like that ._. Okay sambung;


Kecikkan size. Lepas dah kecikkan size tu, buat macam ni,


Create new layer, pastikan layer tu di bawah layer gambar korang tadi. Lepas tu click shape tool macam gambar di atas ni. Pilih warna yang lagi gelap, kemudian buat kotak yang sama tinggi dengan gambar yang korang kecikkan tadi. Macam atas ni. So nanti dia akan jadi macam ni,


Benda ni kita buat sebab nak samakan ketinggian antara dua gambar. Dah sudah, korang upload gambar yang kedua dan drag masuk poster layer. Kecikkan ikut size kotak yang korang buat tadi, macam ni


Kan sama tinggi hoho. Nak sama panjang, just gerakkan gambar kedua tu di atas gambar pertama, lepas tu ukur lah macam biasa ._.

Buat untuk gambar yang ketiga dan keempat. Guna step sama.


Lepas tu delete layer kotak korang tadi tu. Tak nak delete, tekan je bahagian mata kat tepi tu. Macam atas ni. Pastu edit lah empat gambar tu ikut suka hati korang. Samada guna step INI, INI, INI .


Last. Korang merge semua gambar tu jadi satu, pastikan merge empat gambar tu je jangan merge sekali background ._. Kalau nak merge, sila click layer gambar yang berada di kedudukan atas sekali, click belah kanan dan tekan merge. Nanti dia akan gabung dengan gambar di bawahnya . Repeat step sampai semua gambar bergabung



Lepas dah gabung, korang boleh tekan Image > Adjustments > Exposure . Ubah benda tengah yang aku tunjuk macam dalam gambar atas ni. Yang tu akan buat gambar korang tadi jadi pudar .. macam tu lah kiranya ._. kalau tak nak buat step ni pun tak apa, tapi akan nampak over kontra lah dengan background lembut korang tu ._.

Seterusnya aku tak tunjuk lol. Yang ni step seterusnya,

  • Masukkan textures. Macam biasa, upload, drag masuk poster layer. Tak kisah samada nak layer texture tu di atas layer gambar atau di bawah layer gambar. Both can laa. Aku nak bagi korang texture yang aku pakai ni ._. tapi ada yang kena credit tbh aku dah lupa pada siapa yang kena credit ._. so .. sorry ._. cari sendiri la eh ._."
  • Tulis tajuk. Pastikan kena dengan mood poster korang tu ._. ala ala romantic angst sikit ._. slice of life? lol itu apa yang aku rasa after aku tengok poster warna pudar pudar. 


Done. Kalau tak faham ke apa ke ada benda nak tanya ke, sila tanya kat ASK FM.
Adios hoho.

Patut tak aku buat tutorial pasal macam mana penggunaan font dan warna font untuk tajuk? ._."

December 24, 2012

p/g task challenges : Joined list


Gif tak padan langsung dengan mood entry lol

Assalamualaikum.

So here, thanks sesiapa yang sanggup nak ikut sama dengan aku buat challenges merepek ni, walaupun benda ni bukan segmen or contest. Walaupun aku sendiri tak tahu korang dah siap ke belum or terhenti tengah jalan macam aku ke lol.

http://behindmysoom.blogspot.com/2012/12/10-posters-graphics-challenges.html 
http://kikolotto.blogspot.com/2012/12/10-postersgrafics-challenges-by-nana.html 
http://bluelolipophana.blogspot.com/2012/12/10-posters-graphics-challenges.html 
http://parkhyunji.blogspot.com/2012/12/10-postersgraphics-challenge-nana-johari.html 
http://kaiisoo.blogspot.com/2012/12/graphics-and-posters-challenge.html 
http://sungyeolinspirit.blogspot.com/2012/12/10-postersgraphics-challenge-nana-johari.html 
http://smoothieesgottafly.blogspot.com/2012/12/10-posters-graphics-challenges.html 
http://pastlesrainbow.blogspot.com/2012/12/10-postersgraphics-challenges.html 
http://d-bana.blogspot.com/2012/12/10-postersgraphic-challenges.html
http://awesomeinfinity.blogspot.com/2012/12/posters-graphics-challanges.html
http://dlrbals321.blogspot.com/2012/12/10-postersgraphics-challenge.html 
http://eyrazmyofficial.blogspot.com/2012/12/10-postersgraphic-challenges.html
http://storymine-is-kpop.blogspot.com/2012/12/10-postersgraphics-challenges.html 
http://chitchotcikdibo.blogspot.com/2012/12/challenges.html 
http://bluelolipophana.blogspot.com/2012/12/10-posters-graphics-challenge.html
http://yeyenpolkadot.blogspot.com/2012/12/10-poster-graphics-challenges.html 
http://saekki.blogspot.com/2012/12/10-postersgraphics-challenge.html 
http://whisperofmelody.blogspot.com/2012/12/10-graphic-poster-challenge.html 
http://heymycutereader.blogspot.com/2012/12/graphic-challenges-by-nana-johari.html 
http://lifeinbiru.blogspot.com/2012/12/10-postersgraphics-challenges.html 
http://storymyaq.blogspot.com/2012/12/10-posters-graphics-challenges.html 
http://thisismystorylah.blogspot.com/2012/12/10-postersgraphics-challenges.html
http://muazzadli.blogspot.com/2012/12/10-postergraphic-challenges.html
http://iman-karmilla1999.blogspot.com/2012/12/10-postersgraphics-challenges.html 
http://ryeowooklovers.blogspot.com/2012/12/10-postergraphics-challenges.html
http://zambo-zell.blogspot.com/2012/12/Graphic-Challenge.html
http://kangjun-cheese.blogspot.com/2012/12/10-postersgraphics-challenges.html
http://karyuum.blogspot.com/2012/12/posters-graphics-challenges_20.html


Adios.

December 8, 2012

Photoshop : Exposure



Assalamualaikum.
Ni satu lagi benda alah yang aku selalu guna. Exposure. Macam ni carinya kalau guna CS3. Kalau guna CS5, benda tu ada kat barisan atas atas dalam adjustments column.


Simple knowledge :


Kalau korang tarik no 1 atau Offset tu ke kanan, dia akan jadi terang ._. ala-ala kelabu asap centu ._. Kalau korang tarik no 2 atau Gamma Correction tu ke kanan, dia akan jadi gelap ._. Sila lah main dengan benda alah tu. Exposure tu korang boleh usik jugak, tapi aku tak selalu usik yang tu lol. Effect kuat sangat.

Contoh;



Adios

Photoshop : Curve [RGB]



Assalamualaikum.

Aku selalu guna curve, kadang-kadang gambar yang low quality pun boleh nampak macam HQ. Ok memula macam biasa open Photoshop, upload gambar yang berkenaan. Dah upload, then buat macam ni,


Nanti akan keluar benda alah bawah ni. Pastikan dalam Channel RGB. Ni untuk image yang dalam RGB mode tu ._. Ada yang dalam mode grayscale. Yang tu lain sikit. Nanti lah aku buat pasal yang tu. Buat yang RGB dulu ._.


Okay. Nampak nombor 1, 2, 3 tu kan . Untuk yang simple edit punya lah, penerangan; kalau korang tarik garisan pada bahagian no 1 ke kanan iaitu ke bawah, image akan jadi gelap, pekat. Kalau korang tarik garisan senget tu pada bahagian no 2 ke atas atau ke kiri, image akan jadi cerah. Yang bahagian 3 tu, kalau korang tarik ke atas atau ke kiri, warna image akan jadi pudar macam tu ._.

Contoh ._.
Tengok garisan dalam gambar di bawah dan tengok kesan pada contoh image.




Adios



Photoshop : Desaturated


Assalamualaikum.
Desaturated. Black and white dengan erti kata lain lol. Tu ha nampak tak gambar atas tu ._. Okay nak buat macam tu.

Upload gambar yang korang nak guna ke dalam Photoshop. Lepas tu ikut step bawah ni,


Ni kalau cara cepat, korang boleh jugak click Black and White kat situ.
Lepas tu jadilah hitam dan putih

Adios

Photoshop : How to re-size image



Assalamualaikum.

Tak silap aku ada orang pernah tanya ._. Tapi maybe dia tanya waktu aku tengah busy layan abe SPM, so aku tak boleh nak jawab ._. Samada orang tu dah dapat jawapannya atau tidak, takpe lah aku tetap buat. Ni untuk yang tak tahu guna PS ._.

Macam mana nak resize image ._.
First, open Photoshop. Apa apa CS pun boleh. Tekan File > Open > Dan upload gambar yang korang nak.

Kalau korang nak adjust dia punya size dalam layer asal macam ni, korang just tekan Image > Image size. Lepas tu resize lah.

Kalau korang nak adjust size image tu dalam layer lain, macam biasa, sila tekan File > New dan create new layer. Lepas tu drag masuk image yang korang upload ke layer yang korang buat tadi. Macam ni, tekan tool yang aku tunjuk ni,


Lepas dah transfer masuk, gambar akan jadi macam bawah ni. Nampak tak kotak kecik kat tepi tu, kat situ lah tempat nak re-size. Just tekan dan tarik sesuka hati.


Lepas dah siap re-size, korang tekan tool yang aku label sebagai no 2 kat bawah ni.


Nanti akan keluar macam ni, tekan lah apa yang aku petakkan tu


Pastu siap.


Freebies : Photoshop Textures [Design]


Sorry tak ada artwork contoh lol

Assalamualaikum.

Hari ni lol malam ni aku nak kasi simple freebies untuk background poster ._. Happy poster. Gradient punya background ._. Kalau nak ubah warna, sila tekan Image, Adjustment, Color Balance. Pastu tukar lah ._.

700x700 px . Wajib komen kalau ambik ._. Tekan SINI untuk tengok url

1

2

3

4

5

6

7



December 3, 2012

10 Posters/Graphics Challenges



http://i.imgur.com/aUXfI.png

Assalamualaikum.

Aku search tadi, konon nak cari Graphics Challenges memandangkan aku dah bosan gilos nak edit tapi tak tahu nak edit apa. Tak jumpa lol. So aku buat lah sendiri. Hahaha. Sesiapa yang nak buat challenges ni, dipersilakan. Nak ambik banner tu sekali pun takpe . Err for sure untuk sesiapa yang selalu or pernah main chak chak dengan PS lol. Sesiapa yang nak buat, inform aku bolehlah aku usha poster korang yang cun tu. Inform je kat memana lol twitter ke fesbuk ke komen ke apa ke. Kalau nak aa.

Benda ni lebih untuk latihan sebenarnya. Aku buat untuk diri aku lol. Tak ada time limit. Ikut turutan. Satu task satu poster. Nak sehari satu task ke dua hari satu task ke sukehati. Memandangkan aku ni pun masa terluangnya tak tentu.

List 10 biases [korean/japanese/others] 

 Luhan
 LJoe
 Joker Junhyung
 Ilhoon
 Myungsoo
 Sehun
 Daehyun
 Kyomo
 Nishikido
 Simon 

Tasks

1 : Introduce yourself or your interests using bias' 4 photo. Make it as a romcom poster/graphic
2 : Make a light angst/romantic poster using bias' 8 photo
3 : Make a romcom poster/graphic using bias' 1 photo with 4 different colors 
4 : Make a romantic/angst poster using your otp of bias' 5 with 3 colors only [black.white.other]
5 : Make a dark angst poster using bias' 7 photo with another optional character [black background]
6 : Make an action/thriller poster using bias' 10 photo 
7 : Make a romcom poster using bias' 2 photo in grayscale with colorful background
8 : Make a gif poster using bias' 3 photo and his/her group members
9 : Make a or more than one 100x100 px icon using bias' 6 photo with the use of coloring PSD
10 : Make a horror poster using bias' 9 photo   

Rules

1 : You can add any other characters in the poster (not more than four) [unless the number of characters has been stated] 

2 : Use 550 x 700 px [optional]
Romcom tu romantic comedy 

Adios amigo