1. اردو محفل سالگرہ شانزدہم

    اردو محفل کی سولہویں سالگرہ کے موقع پر تمام اردو طبقہ و محفلین کو دلی مبارکباد!

    اعلان ختم کریں

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

جہانزیب نے 'گرافکس ٹیوٹوریلز' کی ذیل میں اس موضوع کا آغاز کیا، ‏مارچ 1, 2009

  1. جہانزیب

    جہانزیب محفلین

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]
     
    • پسندیدہ پسندیدہ × 16
  2. جہانزیب

    جہانزیب محفلین

    مراسلے:
    2,442
    جھنڈا:
    UnitedStates
    موڈ:
    Brooding
    واٹر مارک

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]
     
    • پسندیدہ پسندیدہ × 15
  3. محمدصابر

    محمدصابر محفلین

    مراسلے:
    7,161
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    شکریہ جہانزیب بھائی۔ بہت اچھا ٹیوٹوریل ہے۔ لیکن میں‌نے کہیں ایک سکرپٹ دیکھا تھا جو تصاویر کو اپلوڈ کرنے سے پہلے اس کا سائز سیلیکٹ کرنے کی سہولت دیتا ہے۔ اور تصویر کو cropکرنے کی سہولت دیتا ہے۔ اگر وہ سکرپٹ مل جائے تو کیا ہی بات ہو۔
     
    • پسندیدہ پسندیدہ × 2
  4. فرحت کیانی

    فرحت کیانی لائبریرین

    مراسلے:
    11,116
    جھنڈا:
    Pakistan
    موڈ:
    Confused
    بہت شکریہ جہانزیب۔ اب مجھے بھی گمپ کی کچھ کچھ سمجھ آنے لگ گئی ہے۔
     
    • پسندیدہ پسندیدہ × 2
  5. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    بہت عمدہ ٹیوٹوریل ہے اور نہایت مفید!۔۔۔۔۔۔۔ایک سوال پوچھنا چاہونگا۔ چونکہ فوٹوشاپ ہی زیادہ استعمال کیا ہے۔ اس لئے فالحال گمپ میں تھوڑی مشکلات پیش آرہی ہیں۔ کیا
    گمپ میں کوئی ایسا طریقہ ہے کہ ہم اردو ٹیکسٹ ٹائپ کرنے کے بعد ٹیکسٹ کو آؤٹ لائن یا پاتھ میں تبدیل کر دیں تاکہ اگر اسے فوٹوشاپ میں کھولا جائے تو حسب منشا اس کے سائز میں اضافہ کرنے سے ٹیکسٹ پکسلیٹ نہ ہو۔ مختصرا میں یہ چاہتا ہوں کہ چونکہ فوٹوشاپ میں چونکہ یونی کوڈ سپورٹ موجود نہیں (مڈل ایسٹ ورژن کو چھوڑ کر) اس لئے گمپ میں اردو متن ٹائپ کر کے اسے پاتھ میں تبدیل کر کے psd میں محفوظ کر لوں تاکہ جب فوٹوشاپ میں اسے کھولا جائے تو متن بکھرے بھی نہیں اور اس کے سائز میں اضافہ بھی ممکن ہو سکے ٹرانسفورم ٹول کے ذریعے۔ امید ہے آپ سوال سمجھ جائیں گے۔ پلیز رہنمائی فرمائیں!
     
    • پسندیدہ پسندیدہ × 1
  6. جہانزیب

    جہانزیب محفلین

    مراسلے:
    2,442
    جھنڈا:
    UnitedStates
    موڈ:
    Brooding
    شعیب جب آپ عبارت لکھتے ہیں‌ تو عبارت والی لئیر کو لئیر ڈائلاگ میں‌ منتخب کریں‌، اس کے بعد رائٹ‌ کلک کر کے Alpha to selction پر کلک کریں ۔اب تصویر والی ونڈو میں آ کر Select اور وہاں To Path پر کلک کر کے منتخب عبارت کا پاتھ بن جائے گا ، لیکن یہ نظر نہیں آئے گا ۔ اِسے دیکھنے کے لئے لئیر ڈائلاگ باکس میں بنے اوپر کے مینو میں path پر کلک کر کے اسے آن کرنے سے پاتھ نظر آنا شروع ہو گا ۔آپ اس کو psd فارمیٹ میں مخفوظ کر کے فوٹوشاپ میں کھول سکتے ہیں ۔
    [​IMG]
     
    • پسندیدہ پسندیدہ × 4
  7. جہانزیب

    جہانزیب محفلین

    مراسلے:
    2,442
    جھنڈا:
    UnitedStates
    موڈ:
    Brooding
    آپ سرور سائیڈ‌ سکرپٹ‌ کی بات کر رہے ہیں‌تو پی ایچ پی میں‌ بنے ایسے کئی سکرپٹ‌ موجود ہیں‌ ۔ البتہ اینڈ یوزر کی جانب جاوا سکرپٹ‌ سے کام چلایا جا سکتا ہے ۔
     
  8. محمدصابر

    محمدصابر محفلین

    مراسلے:
    7,161
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    شکریہ جہانزیب بھائی۔ مجھے کلائنٹ سائیڈ سکرپٹ ہی چاہیے تھا۔ سکرپٹ ڈاؤنلوڈ تو کر لیا ہے اب اسکو استعمال کرکے دیکھتا ہوں۔
     
  9. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    بہت شکریہ جہانزیب !۔۔۔۔۔۔ میں نے ہو بہو اس نسخے پر عمل کیا لیکن جس طرح آپ کے اسکرین شاٹ میں پاتھ میں آنکھ روشن کرنے سے پاتھ دکھائی دے رہا ہے میرے پاس نظر نہیں آرہا ہے۔ فوٹوشاپ میں کھولنے پر بھی کوئی پاتھ نظر نہیں آ رہا۔ بہت معذرت کے ساتھ پلیز مدد کریں۔ میں کیا غلطی یا بے وقوفی کر رہا ہوں؟:idontknow:
     
    • پسندیدہ پسندیدہ × 1
  10. جہانزیب

    جہانزیب محفلین

    مراسلے:
    2,442
    جھنڈا:
    UnitedStates
    موڈ:
    Brooding
    نہیں‌ آپ غٌلطی نہیں‌ کر رہے، لیکن آپ شائد عبارت والی لئیر کو خذف کرنا بھول گئے ہیں‌ ، اس وجہ سے اصل عبارت نظر آ رہی ہو گی ۔
     
    • پسندیدہ پسندیدہ × 1
  11. اشتیاق علی

    اشتیاق علی لائبریرین

    مراسلے:
    10,994
    جھنڈا:
    Pakistan
    موڈ:
    Breezy
  12. دعا

    دعا محفلین

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

اس صفحے کی تشہیر