live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Auzef Grafik Tasarım -II Ünite 2 Adobe Photoshop ile İleri Görsel Düzenleme ve Arayüz Mimarisi,
Auzef Web Tasarım ve Kodlama
https://lolonolo.com/2026/03/14/grafik-tasarim-ii-unite-2/
https://lolonolo.com
Show More Show Less View Video Transcript
0:00
Herkese merhaba. Photoshop deyince
0:02
aklınıza ne geliyor? Muhtemelen fotoğraf
0:04
düzenlemek. Belki dijital çizimler. Peki
0:06
ya size Photoshop'un aslında bir web
0:08
sitesi inşa etme aracı olduğunu
0:10
söylesem? Evet yanlış duymadınız. Bugün
0:13
Photoshop'a bakışımızı kökünden
0:14
değiştireceğiz. Şimdi konuyu daha iyi
0:17
anlamak için iki farklı kafa yapısını
0:20
karşılaştıralım. Bir tarafta sanatçı
0:22
var. O tamamen sezgileriyle hareket
0:24
eder. Hım bu böyle güzel durdu. der ve
0:27
işi bitirir. Ama diğer tarafta mimar
0:29
var. Mimar için önemli olan bir şeyin
0:32
sadece güzel durması değil doğru
0:34
olmasıdır. Yani bir sisteme, bir yapıya
0:36
dayanmasıdır. İşte web tasarımı
0:39
dünyasında bu iki yaklaşım arasındaki
0:41
fark gece ile gündüz gibi. Bu bölüm tam
0:44
olarak bu dönüşümle ilgili. Yani dijital
0:47
bir sanatçı olmaktan çıkıp nasıl dijital
0:49
bir mimara dönüşürsünüz? Çünkü şunu
0:52
unutmayın. Bizim amacımız duvara
0:54
asılacak bir tablo yapmak değil. inşa
0:56
edilebilir, tıkır tıkır çalışan bir
0:58
plan, bir proje oluşturmak. Kaynak
1:01
metnimizdeki şu cümle durumu o kadar
1:03
güzel özetliyor ki bir web tasarımcısı
1:06
için Photoshop sanatsal bir boyama
1:08
aracından ziyade piksel hassasiyetinde
1:11
üretim yapan bir arayüz mühendisliği
1:14
aracıdır. Yani olay şu: Yaptığınız her
1:17
fırça darbesinin, seçtiğiniz her rengin
1:20
kod dünyasında bir karşılığı olmalı.
1:22
işlevsellik estetiğin önüne geçiyor.
1:25
Peki bir mimar işe nereden başlar? E
1:27
tabii ki temelden. Gelin projenizin
1:30
temelini nasıl sağlam atacağımıza yani
1:32
her web tarayıcısının anlayacağı o
1:34
evrensel dili nasıl konuşacağımıza
1:36
bakalım. Eminim başınıza gelmiştir.
1:38
Photoshop'ta harika cıvıl cıvıl
1:40
renklerle bir tasarım yapıyorsunuz ama
1:42
web sitesine yüklenince bir bakıyorsunuz
1:45
renkler solmuş sanki yıkanmış gibi
1:47
duruyor. Peki neden? İşte bu can sıkıcı
1:51
sorunun cevabı aslında çok ama çok basit
1:54
bir ayarda gizli ve bu küçük detay
1:56
inanın bana profesyonel bir işi amatör
1:59
bir işten ayıran en temel şeylerden
2:01
biri. İşte o sihirli ayar. SRGB. Nedir
2:05
bu sRGB? Kısaca web'in ortak lisanı.
2:08
Kullandığınız telefonun ekranı,
2:09
bilgisayarınızın monitörü, arkadaşınızın
2:11
tableti hepsi ama hepsi renkleri sRGB
2:14
standardına göre göstermeyi bekler. Eğer
2:17
siz başka bir renk uzayında yani başka
2:19
bir dilde tasarım yaparsanız tarayıcılar
2:21
bu renkleri doğru tercüme edemez ve
2:23
sonuç o soluk cansız görüntü olur. Kural
2:26
basit. Web için çalışıyorsanız daima
2:28
sRGB. Bir de şu var. Tasarımcı olarak
2:31
siz bir bonu şöyle göz kararı ortaya bir
2:33
yere koydunuz. Harika görünüyor ama
2:35
sonra dosyayı geliştiriciye
2:37
yolluyorsunuz ve bir feryat kopuyor.
2:39
Neden? Çünkü kod dünyasında göz kararı
2:42
diye bir şey yoktur. Her şeyin
2:43
matematiksel bir konumu, bir ölçüsü
2:45
olmalı. İşte tasarımınızın matematiğiyle
2:47
kodun matematiği birbiriyle konuşmuyorsa
2:49
en güzel tasarım bile geliştirme
2:51
aşamasında tam bir baş ağrısına dönüşür.
2:53
Peki bu matematik probleminin çözümü ne?
2:56
Cevap bu sayıda gizli. 12.
3:00
Evet. Sadece 12. Bu sayı modern ve
3:02
esnek. Yani her ekrana uyum sağlayan o
3:04
responsive dediğimiz web tasarımının
3:06
adeta temel taşıdır. Hem tasarımcıya
3:09
yaratıcı bir özgürlük verir hem de
3:10
geliştiricinin işini inanılmaz
3:12
kolaylaştırır. İşte o 12 sayısının somut
3:15
hali. 12 sütunlu ızgara sistemi. Bu ne
3:18
demek? Tasarımınızı 12 eşit parçaya
3:21
bölünmüş bir iskeletin üzerine
3:22
kuruyorsunuz demek. Ve işin en güzel
3:24
yanı ne biliyor musunuz? Boostrap gibi,
3:26
CSS Grid gibi dünyada en çok kullanılan
3:29
kodlama sistemleri de tam olarak bu
3:31
12'lik sistemle çalışıyor. Yani siz
3:33
tasarımda bir elemanı D sütun
3:35
genişliğinde yaptığınızda geliştirici
3:37
bunu koda doğrudan 4 sütun olarak
3:39
yazabiliyor. İşte bu kadar basit. Göz
3:42
kararı bitti. Matematiksel kesinlik
3:44
başladı. Şimdi temelimiz sağlam. Peki bu
3:47
temelin üzerine inşaat yaparken en
3:49
önemli kural ne? Gelin profesyonel bir
3:52
tasarımcının belki de en ama en önemli
3:55
alışkanlığına bakalım. Bu kural sadece
3:57
işinizi değil kelimenin tam anlamıyla
3:59
akıl sağlığınızı da koruyacak. Önce
4:02
felaket senaryosunu görelim. Diyelim ki
4:04
bir ayakkabı fotoğrafı var ve üzerinde
4:06
küçük bir leke gördünüz. Hemen silgi
4:08
aracını kaptınız, lekeyi sildiniz,
4:10
dosyayı kaydettiniz. Harika, leke gitti.
4:13
Ama o sildiğiniz pikseller de sonsuza
4:15
dek gitti. Geri dönüşü yok. Ve tam o
4:17
anda o korkulan telefon gelir. Müşteri
4:20
der ki, "Ya o sildiğin yerdeki detayı
4:23
aslında seviyordum. Biraz geri
4:24
getirebilir miyiz? İşte o an soğuk
4:26
terler dökmeye başladığınız andır. Çünkü
4:29
geri getirecek bir şey yoktur. O
4:31
pikseller buharlaştı. Teknik olarak buna
4:33
veri kaybı diyoruz. Yani orijinal
4:36
bilgiyi kalıcı olarak yok ettiniz. Bunu
4:39
bir belgenin bir parçasını makasla kesip
4:41
atmak gibi düşünebilirsiniz. Bir kere
4:43
gitti mi? gitmiştir. Hatta uzmanlar bunu
4:46
histogram denilen bir grafikte
4:48
boşluklar, böyle tarak dişi gibi
4:50
kırıklar olarak görürler. Bu
4:52
çalışmanızın kalitesini düşüren
4:54
affedilmez bir hatadır. Peki mimar bunu
4:57
nasıl yapardı? İşte profesyonel yöntem.
5:00
Ayakkabı fotoğrafını açar ama silgiyi
5:02
eline bile almaz. Onun yerine bir ayar
5:04
katmanı ekler. Lekeyi silmek yerine bu
5:07
katmanın maskesi üzerinde siyahla
5:09
boyarak gizler. Yani orijinal fotoğrafa
5:11
tek bir piksel bile dokunmamış olur.
5:13
Müşteri mi bir şey istedi? Sadece maske
5:15
üzerindeki siyah boyayı beyazla
5:17
silersiniz ve leke olduğu gibi geri
5:19
gelir. Tam kontrol, sıfır risk. Gelelim
5:22
bir başka klasik probleme. Elinizde bir
5:24
logo var. Önce küçülttünüz. Sonra yok ya
5:27
biraz büyük olsun dediniz. Büyüttünüz.
5:29
Bir baktınız ki logo çamur gibi olmuş.
5:31
Bütün netliğini kaybetmiş. Tanıdık geldi
5:34
mi? Bunun çözümü de akıllı nesne yani
5:37
smart object kullanmak. Akıllı nesneyi
5:39
resminizin etrafında şeffaf, koruyucu
5:42
bir kutu gibi düşünün. Siz o kutuyu
5:44
istediğiniz kadar küçültüp
5:45
büyütebilirsiniz ama içindeki orijinal
5:47
resim her zaman ilk günkü kalitesinde
5:49
sapa sağlam kalır. Piksel kaybı sıfır,
5:52
bulanıklık asla. Şimdi tüm bu
5:55
öğrendiğimiz teknikleri birleştirelim ve
5:57
köprünün sonuna gelelim. Yani bizim
5:59
Photoshop tuvalimizden çıkıp web
6:01
tarayıcısında canlanacak olan nihai
6:03
ürüne yani koda nasıl bağlanacağımıza
6:05
bakalım. Unutmayın, mimarın her çizgisi
6:08
şantiyedeki bir tuğlaya, bir kolona
6:10
karşılık gelir. Bizim için de durum
6:11
farksız. İşte bu tablo olayın özeti.
6:15
Bakın siz Photoshop'ta bir katmana gölge
6:18
efekti verdiğinizde geliştirici bunu
6:20
kodda box shadow komutuyla yazar. Siz
6:23
iki katmanı multiply moduyla
6:25
karıştırdığınızda o bunu mix blend
6:27
mod'la yapar. Sizin kullandığınız
6:30
çalışma yüzeyleri yani artboardlar bile
6:32
kod dünyasındaki farklı ekran
6:34
boyutlarına uyum sağlayan breakpere
6:36
karşılık gelir. Yani aslında siz görsel
6:39
bir dille kod yazıyorsunuz. Bu dili ne
6:41
kadar iyi bilirseniz geliştiriciyle o
6:44
kadar iyi anlaşırsınız. İşte tüm bunları
6:46
bir araya getirdiğinizde ne oluyor
6:48
biliyor musunuz? Sadece güzel resimler
6:51
çizen bir tasarımcı olmaktan çıkıp
6:53
projenin en değerli ortaklarından birine
6:56
bir çözüm ortağına dönüşüyorsunuz. Çünkü
6:58
sizin yaptığınız iş artık sadece estetik
7:01
değil, aynı zamanda fonksiyonel,
7:03
uygulanabilir ve sağlam. Peki bu
7:06
analizden aklınızda kalması gerekenler
7:08
ne? İşte size mimarın kontrol listesi.
7:11
Dört basit madde. 1. Web'in ortak dili
7:13
olan sRGB'yi konuş. 2. 12 sütunlu ızgara
7:17
gibi sağlam bir temel üzerine inşa et.
7:19
3. Yıkıcı olmayan yöntemlerle orijinal
7:22
verini her zaman koru. Ve 4. Her zaman
7:24
bir mühendis gibi düşün. Yani yaptığın
7:26
her şeyin kodda bir karşılığı olduğunu
7:28
bilerek tasarla. Bu dört madde sizi bir
7:31
üst seviyeye taşıyacak ve bu da bizi en
7:34
başa o kritik soruya geri getiriyor. Siz
7:37
bir sonraki projenizde tuvalin başına
7:39
bir ressam gibi mi oturacaksınız yoksa
7:41
bir mimar gibi mi? Bir sanat eseri mi
7:44
yaratmak istiyorsunuz yoksa inşa
7:46
edilecek bir yapının planını mı çizmek?
7:49
Cevabı size kalmış.