گرافکس ویب لاگ، تصاویر ، واٹرمارک

جہانزیب

محفلین
اگر آپ اپنا ذاتی بلاگ یا ویب سائٹ چلا رہے ہیں، تو بعض اوقات اُس میں تصاویر کا اضافہ بھی کرنا پڑتا ہے ۔ ویب پر تصاویر لگاتے وقت جند ایک باتوں کا دھیان کرنا ضروری ہوتا ہے، جن میں سرِ فہرست تصاویر کا حجم ہے ۔ اگر آپ ڈیجیٹل کمیرہ سے بنائی گئی تصویر کو ویسے ہی اپنی ویب سائٹ پر لگا دیں گے تو سست رفتار انٹرنیٹ کنکشن پر تصاویر کھلنے میں بہت دیر لگا دیں گی ۔
اگر آپ ورڈپریس پر اپنی تصاویر کو خودکار طریقہ سے چھوٹا بڑا کرنا چاہتے ہیں تو settings میں جا کر media کی ترجیع پر جانے سے ایسا کیا جا سکتا ہے، جہاں آپ thumbnail, Medium Size اور Large Size کو اپنے سانچہ کے لحاظ سے متعین کر سکتے ہیں ۔

3318627288_11462e9e5d.jpg


فرض کریں اگر آپ کے سانچہ میں متن کی چوڑائی 600 پکسلز ہے تو یہاں تصویر کے بڑے سائز میں 580 پکسلز رکھنے سے تصویر متن میں درست طریقہ سے نظر آئے گی، اور بڑا ہونے کی صورت میں متن سے باہر نہیں نکلے گی ۔
دوسرا طریقہ اسٹائل شیٹ میں ردوبدل کر کے تصویر کو ہمیشہ متن کے مطابق دکھایا جا سکتا ہے ۔
لیکن اوپر کے بیان کردہ کسی بھی طریقہ سے تصویر اپلوڈ کرنے پر اصل تصویر اپنے مکمل حجم کے ساتھ سرور یا اگر کسی امیج ہوسٹنگ سروس کا استعمال کیا ہے تو وہاں موجود ہو گی ۔ اور خودکار طریقہ سے چھوٹا کرنے پر تصویر کے معیار پر فرق پڑ سکتا ہے ۔
اِس کا سب سے بہتر طریقہ تصویر کو اپلوڈ کرنے سے پہلے کسی گرافکس پروگرام میں مرضی کے مطابق ڈھال کر چھوٹا بڑا کرنا ہے ۔اِس کام کے لئے میں گمپ کا استعمال کروں گا ۔
مثلاً یہ تصویر دیکھیں یہ نیویارک میں پاکستان ڈے پریڈ 2003 کی تصویر ہے، تصویر کا اصل سائز 1536x1024 ہے جبکہ کمپیوٹر پر 14.1MB کی جگہ گھیر رہی ہے ۔ اس موقع پر لی گئی باقی تصاویر بھی اسی حجم کی ہیں ۔ اور اگر میں انہیں بلاگ پر دکھانے کے ایسے ہی سب تصاویر لگا دوں تو تصاویر کھلنے کے انتظار میں کئی لوگ سائٹ سے نکل جائیں گے ۔

3318628628_48ec16dc00_b.jpg


میرے بلاگ پر متن کی جگہ 650 پکسلز ہے، اور تصاویر جو بلاگ پر موجود ہیں ان کی زیادہ سے زیادہ چوڑائی 600 پکسلز ہے ۔ تصویر کو گمپ میں کھول لیں ۔ اِس کے بعد Image اور وہاں Scale Image کی ترجیع پر جانے سے مندرجہ ذیل دریچہ کھلے گا ۔

3318628266_ee6fdf1334.jpg


اگر آپ چوڑائی اور اونچائی کو تناسب سے لحاظ سے نہیں بڑھانا چاہتے تو سامنے بنے زنجیر کے نشان پر کلک کر کے ایسا کر سکتے ہیں، لیکن اگر آپ تصویر میں تناسب رکھنا چاہتے ہیں تو اسے ایسا ہی رہنے دیں، چوڑائی کم یا زیادہ کرنے سے اسی تناسب سے اونچائی بھی کم یا زیادہ ہو گی ۔
اس کے بعد سب سے آخری ترجیع Interpolation ہے، جو مجوزہ طور پر Cubic منتخب ہوتی ہے، اگر تو آپ بڑی تصویر کو چھوٹا کر رہے ہیں تو یہ ترجیع مناسب ہے، لیکن سب سے بہتر ترجیع Sinc ہے، جس میں نقصان کم سے کم ہوتا ہے ۔اپنی ترجیحات منتخب کر کے Scale کا بٹن دبانے سے تصویر چھوٹی ہو جائے گی ۔
ایسا کرنے کے بعد تصویر کو Save کی بجائے ہمیشہ Save As منتخب کر کے مخفوظ کریں اور اپنی پسند کے فارمیٹ، میرے خیال میں jpg ویب کے لئے کافی بہتر ہے میں مخفوظ کر لیں ۔ Save منتخب کرنے سے آپ کی اصل تصویر کے اوپر ہی یہ تصویر مخفوظ ہو جائے گی، دوسرے الفاظ میں ضائع ہو جائے گی ۔
جب آپ تصویر کو jpg میں مخفوظ کریں گے، تو ایک نیا ترجیحات والا دریچہ کھلے گا، جہاں آپ تصویر کی کوالٹی کو گھٹا بڑھا سکتے ہیں، مجوزہ طور پر یہ 85 فی صد پر ہوتا ہے، ویب کے لئے 85 سے 95 فی صد کے درمیان انتہائی مناسب ہے ۔اور تصویر کا سائز 600x400 جبکہ ڈسک پر جگہ صرف 75.4KB رہ گئی ہے ۔اب ہم اسے بغیر کسی پریشانی کے ویب پر اپلوڈ کر سکتے ہیں ۔

3318628164_2f90c32d1d_o.jpg
 

جہانزیب

محفلین
واٹر مارک

اب آپ نے اپنی تصویر ویب سائٹ پر اپلوڈ کر دی، لیکن ویب پر چور بھی موجود ہیں جو دوسروں کی محنت پر اپنا کام نکالتے ہیں۔ آپ کی تصاویر کو چوری کر کے اپنی ویب سائٹ کی زینت بنا لیتے ہیں ۔ خاص طور پر اگر آپ فوٹوگرافر ہیں اور کاروباری نقطہ نظر سے تصاویر لگائی ہیں، تو ایک تو تصاویر کا معیار گھٹا کر تصاویر دکھانے سے چوری سے بچا سکتا ہے، اور جب کوئی خریدار ملے تو اصل تصویر اصل کوالٹی کے ساتھ اسے دی جا سکتی ہیں ۔ اِس کے علاوہ اگر آپ نے GettyImages دیکھے ہوں تو تصاویر پر ان کا نشان ہوتا ہے، جسے واٹرمارک کہتے ہیں، اور جب کوئی تصویر خریدتا ہے تو اصل کوالٹی اور بغیر واٹرمارک کے اسے تصویر مہیا کی جاتی ہے ۔
لیکن اگر آپ فوٹوگرافر نہیں ہیں صرف میرے جیسا ایک عدد بلاگ چلا رہے ہیں، تو واٹر مارک سے آپ اپنی تشہیر کر سکتے ہیں، جب کوئی آپ کی تصویر اڑائے تو ساتھ ہی آپ کا پتہ بھی جائے ۔ واٹرمارک انتہائی سادہ بھی ہو سکتا ہے جیسے تصویر پر عبارت لکھ دینا یا GettyImages جیسا بھی ہو سکتا ہے ۔
گمپ پر ہم نہایت آسانی سے اپنی مرضی کا واٹرمارک بنا سکتے ہیں ۔ اس کے لئے بہت سے طریقہ کار اپنائے جا سکتے ہیں لیکن میں گمپ میں Bump Map کا استعمال سے واٹر مارک بناؤں گا ۔
سب سے پہلے اپنے بلاگ یا ویب سائٹ میں تصاویر سائز کے حساب سے کوئی تصویر کھولیں ۔
ایسا کرنے کے بعد سب سے پہلے آپ کو اپنا لوگو بنانا ہو گا، میں یہاں بیان کرنے کے لئے اردو محفل کا لوگو بنا کر اسکا واٹر مارک بناؤں گا ۔
عبارت یا ٹیکسٹ ٹول کو منتخب کریں، نیچے ترجیحات میں فانٹ کو جمیل نوری نستعلیق اور سائز کو 100 منتخب کر کے عبارت کا رنگ سفید منتخب کر کے میں نے تصویر میں کسی جگہ کلک کر کے "اردو" لکھا ۔
اس کے بعد اب دوبارہ دوسری جگہ کہیں کلک کر کے فانٹ ترجیحات میں جمیل نوری نستعلیق کشیدہ منتخب کر کے سائز کو 150 اور رنگ کو سفید منتخب کر کے "محفل" لکھا ۔

3317801321_27ab1cda0e.jpg


اس کے بعد اب Move Toolکو منتخب کر کے "اردو" اور "محفل" کو مناسب جگہ پر لے آئے ۔اب چونکہ میں نے عبارت دو دفعہ الگ الگ لکھی ہے، اس لئے میرے پاس عبارت کی دو پرت بن گئی ہیں ۔آپ کے لوگو کے حساب سے یہ مختلف ہو سکتی ہیں ، لیکن اگر یہ ایک سے زیادہ پرت عبارت کی ہیں، توlayer dialogue میں ان پر دایاں کلک کر کے Merge down کی ترجیع پر کلک کر کے ایک ہی پرت بنا لیں ۔اور آسانی کی خاطر اس کا نام watermark رکھ لیں ۔ اب واٹرمارک والی لئیر کو منتخب رکھتے ہوئے تصویر والی ونڈو میں Layer اور وہاں Auto Crop کی ترجیع پر کلک کر دیں ۔

3317801211_793514e405.jpg


3318627930
3317801073_c49a442ae4.jpg

اِس کے بعد ٹولز میں Crop Tool کو منتخب کر کے لوگو کو کراپ کر لیں، لئیر ڈائلاگ باکس میں اب background کے نام سے موجود لئیر کو خذف کر دیں ۔اب آپ کے پاس صرف لوگو والی لئیر موجود رہ جائے گی ۔

3318627658_7a3af10efc.jpg


سوال یہ ہے کہ جب ہم یہ والی لئیر ویسے ہی لکھ کر بنا سکتے تھے تو اوپر سب تردد کرنے کی کیا ضرورت تھی
سب سے تصویر کھول کر اس کے اوپر لوگو بنانے کا مقصد صرف اتنا سا تھا کہ آپ کو اندازہ رہے کہ تصویر پر سائز وغیرہ کے حساب سے لوگو کیسا نظر آئے گا، یہ نہ ہو کہ تصویر بہت بڑی جبکہ اس کے تناسب سے لوگو اتنا چھوٹا ہوتا کہ نظر ہی نہ آئے، یا اس کے الٹ کہ لوگو بہت بڑا اور تصویر بہت چھوٹی ۔ اب اِس لئیر کو ہم watermark.xcf کے نام سے اپنے کمپیوٹر پر محفوظ کر لیں گے ۔
اب اسکا استعمال ان تمام تصاویر پر کر سکتے ہیں جن کے سائز کے حساب سے اسے ترتیب دیا گیا تھا ۔ سب سے پہلے گمپ میں جس تصویر پر اسکا استعمال کرنا ہے اسے کھولیں ۔
اس کے بعد تصویر والی ونڈو میں File اور وہاں open as layers منتخب کریں اور پہلے بنائی ہوئی watermark.xcf کو لئیر کے طور پر کھول لیں ۔
اگلے مرحلہ میں Move Tool کے استعمال سے اسے تصویر کے تناسب سے جہاں لوگو استعمال کرنا چاہتے ہیں وہاں لے جائیں ۔
اب لئیرز ڈائلاگ میں watermark.xcf پر دایاں کلک کر Layer to image size پر کلک کر دیں ۔
اب تصویر والی لئیر جو کہ عموماً background کے نام سے موجود ہوتی ہے کو منتخب کر لیں، اور تصویر والی ونڈو میں Filters وہاں Map اور پھر Bump Map کی ترجیع پر کلک کرنے سے نیا دریچہ کھلے گا ۔

3318627572_dc4deebd22.jpg


یہاں سب سے اوپر اس بات کا دھیان رکھنا ازحد ضروری ہے کہ Bump Map کے سامنے watermark.xcf والی لئیر منتخب ہو ۔ باقی ترجیحات میں Depth کو 2 اور waterlevel کو 100 کر دیں ۔Preview والی کھڑکی میں آپ تبدیلیوں کا مشاہدہ کر سکتے ہیں ۔ مطمعن ہونے کے بعد OK کا بٹن دبا دیں ۔
اب اگر تصویر میں گہرے رنگ زیادہ ہوں تو آپ لئیر ڈائلاگ میں watermark.xcf والی لئیر کو خذف کر سکتے ہیں ۔ لیکن ہلکے رنگوں والی تصویر میں پھر واٹرمارک اتنا واضح نہیں ہو گا، ایسا کرنے کے لئے لئیر ڈائلاگ میں watermark.xcf کی Opacity کو کم کر کے بہتر نتائج لئے جا سکتے ہیں ۔ عموماً 15 سے 50 تک مطوبہ نتائج مل جاتے ہیں ۔ اس تصویر میں 35 پر بہتر نتیجہ مل رہا ہے ۔

3318627498_598b583903.jpg


اخیر میں تصویر والی ونڈو میں Image اور وہاں Flatten Image کو منتخب کر کے، تمام پرتوں کو یکجا کر لیں ۔اور تصویر کو من پسند فارمیٹ میں Save As کا استعمال کرتے ہوئے مخفوظ کر لیں ۔

3317800599_a74dca8d9b_o.jpg
 

محمدصابر

محفلین
شکریہ جہانزیب بھائی۔ بہت اچھا ٹیوٹوریل ہے۔ لیکن میں‌نے کہیں ایک سکرپٹ دیکھا تھا جو تصاویر کو اپلوڈ کرنے سے پہلے اس کا سائز سیلیکٹ کرنے کی سہولت دیتا ہے۔ اور تصویر کو cropکرنے کی سہولت دیتا ہے۔ اگر وہ سکرپٹ مل جائے تو کیا ہی بات ہو۔
 
بہت عمدہ ٹیوٹوریل ہے اور نہایت مفید!۔۔۔۔۔۔۔ایک سوال پوچھنا چاہونگا۔ چونکہ فوٹوشاپ ہی زیادہ استعمال کیا ہے۔ اس لئے فالحال گمپ میں تھوڑی مشکلات پیش آرہی ہیں۔ کیا
گمپ میں کوئی ایسا طریقہ ہے کہ ہم اردو ٹیکسٹ ٹائپ کرنے کے بعد ٹیکسٹ کو آؤٹ لائن یا پاتھ میں تبدیل کر دیں تاکہ اگر اسے فوٹوشاپ میں کھولا جائے تو حسب منشا اس کے سائز میں اضافہ کرنے سے ٹیکسٹ پکسلیٹ نہ ہو۔ مختصرا میں یہ چاہتا ہوں کہ چونکہ فوٹوشاپ میں چونکہ یونی کوڈ سپورٹ موجود نہیں (مڈل ایسٹ ورژن کو چھوڑ کر) اس لئے گمپ میں اردو متن ٹائپ کر کے اسے پاتھ میں تبدیل کر کے psd میں محفوظ کر لوں تاکہ جب فوٹوشاپ میں اسے کھولا جائے تو متن بکھرے بھی نہیں اور اس کے سائز میں اضافہ بھی ممکن ہو سکے ٹرانسفورم ٹول کے ذریعے۔ امید ہے آپ سوال سمجھ جائیں گے۔ پلیز رہنمائی فرمائیں!
 

جہانزیب

محفلین
شعیب جب آپ عبارت لکھتے ہیں‌ تو عبارت والی لئیر کو لئیر ڈائلاگ میں‌ منتخب کریں‌، اس کے بعد رائٹ‌ کلک کر کے Alpha to selction پر کلک کریں ۔اب تصویر والی ونڈو میں آ کر Select اور وہاں To Path پر کلک کر کے منتخب عبارت کا پاتھ بن جائے گا ، لیکن یہ نظر نہیں آئے گا ۔ اِسے دیکھنے کے لئے لئیر ڈائلاگ باکس میں بنے اوپر کے مینو میں path پر کلک کر کے اسے آن کرنے سے پاتھ نظر آنا شروع ہو گا ۔آپ اس کو psd فارمیٹ میں مخفوظ کر کے فوٹوشاپ میں کھول سکتے ہیں ۔
3326217581_35497a0336_o.jpg
 

جہانزیب

محفلین
شکریہ جہانزیب بھائی۔ بہت اچھا ٹیوٹوریل ہے۔ لیکن میں‌نے کہیں ایک سکرپٹ دیکھا تھا جو تصاویر کو اپلوڈ کرنے سے پہلے اس کا سائز سیلیکٹ کرنے کی سہولت دیتا ہے۔ اور تصویر کو cropکرنے کی سہولت دیتا ہے۔ اگر وہ سکرپٹ مل جائے تو کیا ہی بات ہو۔

آپ سرور سائیڈ‌ سکرپٹ‌ کی بات کر رہے ہیں‌تو پی ایچ پی میں‌ بنے ایسے کئی سکرپٹ‌ موجود ہیں‌ ۔ البتہ اینڈ یوزر کی جانب جاوا سکرپٹ‌ سے کام چلایا جا سکتا ہے ۔
 

محمدصابر

محفلین
شکریہ جہانزیب بھائی۔ مجھے کلائنٹ سائیڈ سکرپٹ ہی چاہیے تھا۔ سکرپٹ ڈاؤنلوڈ تو کر لیا ہے اب اسکو استعمال کرکے دیکھتا ہوں۔
 
شعیب جب آپ عبارت لکھتے ہیں‌ تو عبارت والی لئیر کو لئیر ڈائلاگ میں‌ منتخب کریں‌، اس کے بعد رائٹ‌ کلک کر کے Alpha to selction پر کلک کریں ۔اب تصویر والی ونڈو میں آ کر Select اور وہاں To Path پر کلک کر کے منتخب عبارت کا پاتھ بن جائے گا ، لیکن یہ نظر نہیں آئے گا ۔ اِسے دیکھنے کے لئے لئیر ڈائلاگ باکس میں بنے اوپر کے مینو میں path پر کلک کر کے اسے آن کرنے سے پاتھ نظر آنا شروع ہو گا ۔آپ اس کو psd فارمیٹ میں مخفوظ کر کے فوٹوشاپ میں کھول سکتے ہیں ۔
3326217581_35497a0336_o.jpg
بہت شکریہ جہانزیب !۔۔۔۔۔۔ میں نے ہو بہو اس نسخے پر عمل کیا لیکن جس طرح آپ کے اسکرین شاٹ میں پاتھ میں آنکھ روشن کرنے سے پاتھ دکھائی دے رہا ہے میرے پاس نظر نہیں آرہا ہے۔ فوٹوشاپ میں کھولنے پر بھی کوئی پاتھ نظر نہیں آ رہا۔ بہت معذرت کے ساتھ پلیز مدد کریں۔ میں کیا غلطی یا بے وقوفی کر رہا ہوں؟:idontknow:
 

جہانزیب

محفلین
نہیں‌ آپ غٌلطی نہیں‌ کر رہے، لیکن آپ شائد عبارت والی لئیر کو خذف کرنا بھول گئے ہیں‌ ، اس وجہ سے اصل عبارت نظر آ رہی ہو گی ۔
 

دعا

محفلین
کیا بات ہے اپکی جہانزیب بھائی۔
بہت عمدہ ٹوٹوریئل ہے
بہت بہت شکریہ
حسنی نوید آفریدی
 
Top