افزایش وضوح تصویر با چند کلیک ساده | بسیار کاربردی

 خیلی جاها هم شاید این عکس ها رو دیده باشید شاید دوستان من از این قبیل آموزش ها رو در سایت گذاشته باشن  یک افکت بسیار جالب به تصاویرمون میدیم که خیلی کاربرد فراوان در آتلیه ها داره  و وضوح عکس رو در حد نسبتا چشم گیری بالا میبره خب میریم سرآموزش

مرحله ی اول

تصویر زیر رو دریافت و وارد فتوشاپ کنید  یا اگه تصویری متناسب با این آموزش دارید اون رو هم برای تمرین بیشتر در نظر بگیرید

افزایش وضوح تصویر با چند کلیک ساده

برای مشاهده در سایز اصلی روی تصویر کلیک کنید

وقتی که تصویر رو وارد فتوشاپ کردید یک کپی از همین لایه بگیرید.

لایه ی کپی شده رو انتخاب کنید و سپس به مسیر زیر برید

Filter>>Other>>High pass

مقدار ۸۰ پیکسل رو برای ردیوس این فیلتر در نظر بگیرید و اوکی رو بزنید

تصویر شما باید تا الان این شکلی شده باشه

مرحله ی دوم

مد لایه ی بکگراند کپی شده رو روی Hard Light قرار بدید حالا با خاموش و روشن کردن چشمک لایه ی بکگراند کپی شده تفاوت رو احساس کنید

 اینم تصویر نهایی

در این قبیل افکت ها وضوح تصویر ما تا حد نسبتا مناسبی بالا میره و این می تونه کار ما رو بهتر کنه برای طراحی

اگه در پایان کار از لایه ی کپی شده ی عکس باز هم کپی بگیرید به یه افکت درامانیک خواهید رسید

 توجه کنید نیازی نیست که کاری صورت بدید وقت از لایه کپی بگیرید 

اگه دقت کرده باشید فقط تا یک مرحله وضوح تصویر خوبه بعد از اون کار هرچقدر این کارو ادامه بدید افکت شما دراماتیک میشه پس دقت کنید

همیشه برای طراحی ایده داشتید باشید بدون ایده هیچ کاری رو نمیشه انجام داد سعی کنید هیچ وقت عجله نکنید هر آموزشی که بود ابتدا خوب توجه کنید بعد اقدام به تمرین کنید

ده نکته حرفه ای که برای طراحی سایت خود باید بدانید

آیا تا به حال از خودتان پرسیده‌اید ویژگیهای یک طراحی وب خوب  چیست؟ آیا می خواهید با یک نگاه بفهمید سایت مورد نظر چقدر حرفه ای طراحی شده؟ این مقاله نه برای طراحان حرفه‌ای با تجربه است و نه برای کسانی که اصلا دلشان به دنیای دیزاین راهی ندارد. این مقاله برای گرافیستهای عزیزی که تازه از دنیای چاپ وارد طراحی اینتراکتیو وب شده اند، و نیز برای برنامه نویسان وب که اصلا فکر نمی کنند که گرافیک صفحات وب هم می تواند مهم باشد و تفاوتی بین Web Design و  Web Programming قائل نیستند حتما مفید خواهد بود. حتی برای افرادی که در هر زمینه ای کار دیزاین انجام می دهند نیز حرفهایی برای گفتن دارد!

ده فرمان زیر، بر اساس تجربه‌ام طی این سالها به دست آمده و تاکید بر نگاهی کاربردی بر این هنر نوین، یعنی طراحی وب دارد. این مقاله فقط به ساختار و فرم سایت می پردازد و طبیعتا بحث محتوای خوب و حرفه‌ای و نیز برنامه نویسی وب و سیستمهای مدیریت محتوا و امنیت وب و... مباحثی جدا می طلبد. قطعا می توان به موارد ذکر شده در این وبلاگ ده ها و صدها آیتم اضافه کرد. پس بعد از خواندن این مقالات هر چیزی به ذهنتان می رسد برایم بنویسید!

1. از خواب بیدار شویم: گرافیک وب، و نه گرافیک چاپی!

2. جدول‌ها را دور بیاندازید: طراحی استاتیک وب CSS Based

3. سایت را تا جای ممکن کم حجم طراحی کنید

4. خوانا و در دسترس بودن سایت بدون تصاویر

5. معماری وب: ساختار نقشه سایت و دسته بندی منطقی و منسجم

6. تحلیل آمار وب و مطابقت با امکانات بازدیدکنندگان

7. برای گوگل بچه مثبتی باشید: بهینه سازی برای موتورهای جستجو

8. سادگی و کارآیی برای رسیدن به محتوای اصلی

9. تاثیرات منفی بنرهای تبلیغاتی در طراحی سایت + راه حل ها

10. نسل دوم طراحی وب و تعامل با کاربر

سایت را تا جای ممکن کم حجم طراحی کنید

شاید یکی از مهمترین اصولی که خیلی از طراحان، چه آنهایی که طراحی به‌روز دارند و چه گرافیستهای چاپی و چه مهندسان پرتال نصب کن! توجهی به آن ندارند حجم سایت است. ناگفته پیداست که یک وبسایت سنگین چه زیانهایی می رساند: بسیاری از کاربران را خسته و پشیمان می کند، آمار بازدیدکنندگانی که برای چندمین بار به سراغ سایت ما می آیند کم می کند، تعداد بازدید از صفحات داخلی را کم می کند، حوصله موتورهای جستجو را برای ایندکس کردن سر می آورد و رتبه ما را در موتورهای جستجو می کاهد. البته سبک یا سنگین بودن حجم یک سایت نسبی است و بستگی به میانگین سرعت مخاطبانمان دارد. قطعا برای کاربر عادی ایرانی 100 کلیوبایت وزن قابل توجهی است ولی برای یک نفر در جایی که اسمش خارج است! شاید یک مگابایتش هم چیز زیادی نباشد.
 طبق تجربه، طراحی کم حجم می تواند یکی از خصوصیاتی باشد که مشتریان را به سوی طراحان وب جذب کند. اما چه عواملی در سرعت سایت تاثیر گذار است؟ اول اینکه شیوه کد نویسی استاتیک بسیار مهم است: اینکه تا چه حد از CSS استفاده مفید بکنید. کدهای داینامیک نظیر php و asp معمولا به خاطر سرعت بالای سرورها در کمتر از یک ثانیه اجرا می شوند که زیاد به حساب نمی آیند! پس روی کدهای استاتیک که تر و تمیز باشند، و تمام CSS ها بیرون از محتوا و در یک یا چند فایل جدا ذخیره شوند تاکید بیشتری باید داشت. زیرا این باعث می شود در بارگزاری مجدد، این فایل از روی Cache کامپیوتر کاربر لود شود و  در سرعت تاثیر مثبت دارد. در مورد فایلهای جاوا اسکریپت نیز وضع به همین منوال است. کدها را ترجیحا در فایلهای جدا باید ذخیره کرد و در هدر سایت فراخوانی کرد. در مواردی که ناچاریم کدها را در فایل اصلی بیاوریم، ترجیحا همه را به پایینترین خطوط کدهای استاتیک انتقال دهیم تا حوصله موتورهای جستجو از سر و کله زدن با این کدها سر نرود، و اگر برود چیز زیادی از دست نداده باشیم! ضمنا در استفاده از افکتهایی که با کتابخانه‌هایی نظیر jQuery اجرا می شوند، باید حواسمان باشد که آیا استفاده از هسته جی کوئری (حدود 80 کلیوبایت) به اضافه کدهای آن افکت به صرفه هست یا نه! زیرا معمولا این کدها را اجنبی های کافر می نویسند که سرعت اینترنتشان خیلی بالاست و ممکن است به فکر سرعت اینترنت در برخی کشورهای دیگر (اسم نمی برم!) نباشند!
مساله مهم و حیاتی دیگر حجم و تعداد تصاویری است که در طراحی به کار می بریم. باید تا جای ممکن از تصاویر کمتر و کم حجمتر استفاده کنیم، و از ساختارهای پر عکس بپرهیزیم (باز هم قابل توجه گرافیستان چاپی). برای ذخیره تصاویر نیز حتما از بخش Save for web در فتوشاپ استفاده کنید. تصاویری که تعداد رنگهای محدودتری دارند، با پسوند gif و تصاویری که سایه روشن یا تنوع طیف رنگی بیشتری داند با پسوند jpg کم حجمتر می‌شوند. پسوند جدیدتر png-24 نیز که از قابلیت شفافیت آن نیز در مرورگرهای جدیدتر می توان استفاده کرد، معمولا از دو نوع قبلی پر حجم تر اما بسیار با کیفیت تر است. چاره دیگر استفاده از تصاویر کوچکی است که تکرار (repeat) می شوند. این روش برای سایه روشنها (gradient) و بافتها (patterns)  بسیار کاربردی است.
عوامل دیگری نظیر میزان محتوا (متن و تصویر) در هر صفحه و نیز سرعت سرور، در سرعت بارگزاری صفحات وب موثرند. برای فشرده کردن فایلهای CSS و js و... از قابلیت gzip کردن در فایل htaccess می توان استفاده کرد. برای این منظور می توانید به بخش Compression در کنترل پنل (Cpanel)  مراجعه نمایید.
شاید بد نباشد این را هم بگویم که قالبهای از پیش طراحی شده اکثر پرتالهای آماده (از جوملا گرفته تا تالارهای گفتگو) معمولا بسیار سنگین هستند و ساختارهایشان نیز پر از فایلهای خارجی و کدهای اضافه است.

طراحی سایت را با مداد و کاغذ شروع کنید

همیشه وقتی تصمیم داریم طراحی یک سایت جدید را انجام دهیم، یک سری سوالات اساسی هست که همیشه ذهن را مشغول می کند: به چه المانهایی نیاز دارم، تو این وب سایت قرار است چه چیزی را معرفی کنم، چه المانهایی باید در صفحه اول و جلوی چشم بازدید کننده باشه و کدام المانها درجه اهمیت کمتری دارن و می تونن در صفحات داخلی قرار بگیرن، ساختار یا لی آوت سایت به چه شکلی باید باشه، چه رنگهایی باید به کار ببرم و سوالهایی از این قبیل.

اما جواب دادن به همه این سوالها معمولا کار سخت و طاقت فرسایی هست، شما نمی تونید به یکباره برنامه فتوشاپ رو باز کنید و یک فایل جدید بسازید و شروع کنید به آزمون و خطا کردن طرحهای مختلف، البته این کار شدنی هست اما خیلی زمان بر و خسته کننده خواهد بود. برای همین معمولا طراحها قبل از شروع کردن به کار روی طرح دیجیتالی دست به کاغذ و قلم میشن، همه ما از بچگی با کشیدن خطوط روی کاغذ آشنایی داریم، اما خب یکسری از افراد از اینکه بخوان طرحشون رو روی کاغذ پیاده کنن ترس دارن !

اصلا لازم نیست شما یک طراح دستی حرفه ای باشین تا بتونین یه طرح دستی خوب از ساختار یک وب سایت تهیه کنید، همین که بتونید ساختار کلی سایت رو روی کاغذ پیاده کنید کافی هست، اصلا لازم نیست بتونید خطوط خیلی صاف بکشید، یا طرحهای شما از سایه و رنگهای متنوع برخوردار باشه، چون این طرحی نیست که بخواین به مشتری نشون بدین، این طرح برای اینه که فکر شما بازتر بشه، بتونین دید کلی نسبت به المانها و ساختار وب سایت بدست بیارین. خیلی راحت میتونید در زمان خیلی کم چندین طرح مختلف برای یک وب سایت آماده کنید و با هم مقایسه کنید.

اما در بعضی موارد می تونین این طرحها رو قبل از شروع به کار روی طرح اصلی با مشتری خود (البته معمولا نشان دادن این طرحها به هر مشتری توصیه نمیشه !) در میان بگذارید و نظراتش رو جویا بشین.

بعد از مدتی که به این روش کار کردین خواهید فهمید که چقدر روی کارتان تاثیر خواهد گذاشت و سرعت کار شما را بالاتر خواهد برد. معمولا برای اولین بار این کار سخت خواهد بود ولی مطمئن باشید ضرر نخواهید کرد !

سادگی و کارآیی برای رسیدن به محتوای اصلی

فرض کنید وارد یک سایت می شوید و با یک اینتروی فلش مواجه می شوید. خوشبختانه سایت یک لینک Skip Intro دارد و وارد صفحه اصلی سایت می شوید. این صفحه با اسلاید تصاویر بزرگ و زیبایی طراحی شده و غیر از عنوان و منو اطلاعات دیگری به ما نمی دهد. روی لینک مقالات در منوی سایت که کلیک می کنیم، صفحه ای باز می شود که در آن عناوین دسته بندی مقالات دیده می شود. مثلا مقالات فرهنگی، مقالات ادبی، مقالات هنری و... . روی مقالات فرهنگی کلیک می کنیم و صفحه دیگری شامل فهرست عناوین مقالات برای ما نشان داده می شود. تازه هنوز یک کلیک دیگر تا دریافت متن کامل مقاله فاصله داریم! می بینید که چنین روالی به راحتی بازدید کننده شما را خسته و یا حتی پشیمان می کند. در صورتی که مثلا می توانستیم دسته بندی مقالات را در منو به شکل یک زیرمنو نشان دهیم و یا عناوین آخرین مقالات را در صفحه اصلی سایت بیاوریم. به جز موارد معدود، غالبا بهتر است محتوایمان را از پستوی سایت در بیاوریم و مثل یک منوی سرآشپز، در دسترس مخاطب و در صفحه اصلی سایت بگذاریم. این کار مزیت دیگری هم دارد: بازدیدکننده دائمی شما به راحتی با یک نگاه می تواند بفهمد کدام بخشها به روز شده و سریع می رود سر اصل مطلب.

استفاده از انیمیشنهای GIF در طراحی وبسایت

شاید نخستین تجربه‌های متحرک سازی در وب را بتوانیم در قالب فایل‌های GIF ببینیم. این قالب گرافیکی بر اساس تعریف سنتی انیمیشن، یعنی متحرک‌سازی فریم به فریم تعریف شد و جای خود را در وبسایتها باز نمود. این دسته از انیمیشن تحت وب، تعاملی نبود و با عمل کاربر عکس‌العملی نشان نمی‌داد. بیشترین کاربرد این قالب در نخستین نمونه‌های بنرهای تبلیغاتی تحت وب بود. عناوین و تصاویر معمولا در چند فریم معدود و با حرکتهای سریع سعی در جذب نگاه مخاطب می کرد. علت اصلی این محدودیت، حجم فایل بود، زیرا با زیاد شدن فریمها حجم فایل بیشتر می شد و بارگزاری آنها مشکل‌تر. البته استفاده‌های خلاقانه دیگری از این قالب هم میشد: مانند چرخش لوگوی یک سایت یا ستاره های چشمک زن بک‌گراند برای ساختن این انیمیشن های تحت فرمت GIF معمولا از نرم افزار Image Ready (که همراه با فتوشاپ بود) استفاده می شد که البته بعدها این قابلیتها به خود Photoshop (در پنلی به اسم Animation) اضافه شد.

امروزه نیز هنوز این قالب انیمیشنی در طراحی وب استفاده می‌شود، اما در مقابل سایر رقبا نظیر فلش و کتابخانه های جاوا اسکریپت نظیر جی کوئری، حرف زیادی برای گفتن ندارد.