طراحی تخت چیست؟

طراحی تخت یا Flat Design در چند ماه اخیر مورد توجه بسیاری از طراحان وب در سراسر دنیا قرار گرفته است. در روش طراحی سایت تخت تا حد امکان از سایه ها و گرادیان رنگی استفاده نشده و اجزای اصلی صفحه سایت با استفاده از رنگ های یکدست و درخشان در کنار فونت های خوانا به نمایش گذاشته میشوند. ایده اصلی طراحی تخت براساس سادگی ارائه و راحتی کاربران شکل گرفته و نمایی مدرن و متفاوت را به سایت شما میبخشد.

طراحی تخت سایت

طراحی تخت برای لوگو

در راستای همین روش نمونه هایی از طراحی تخت برای لوگو یا آیکون شرکت ها و سایت ها ایجاد شد که رفته رفته جای مدل های قبلی را گرفت. به تازگی تکنیک جدیدی مورد استفاده طراحان قرار میگیرد که با نام سایه بلند یا long shadows شناخته میشود.

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

سایه-بلند-طراحی-لوگو

در تکنیک طراحی لوگو و آیکون با سایه بلند، زاویه سایه را ۴۵ درجه انتخاب کرده و طول آن را تا ۲٫۵ برابر طول تصویر اصلی قرار میدهند که این امر در کنار حفظ سادگی و اصول طراحی تخت موجب ایجاد عمق و برجستگی در تصویر میشود. در حال حاضر در طراحی سایت تنها با استفاده از CSS3 میتوان چنین حالتی را ایجاد کرد و در صورت عدم استفاده از آن باید تصاویر را بصورت گرافیکی آماده کنید که ممکن است سایز یک لوگو را تا ۳ برابر افزایش دهد.

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

در پایان یک نمونه طراحی لوگو با استفاده از سایه بلند و با تکنیک طراحی تخت را میبینیم که با خلاقیت خاصی طراحی شده و دو حرف m و o توسط سایه آنها مشخص شده اند.

طراحی تخت

در حالیکه نسل دوم وب سایت ها ، مدت هاست در بازار طراحی وب سایت ها خود نمایی زیادی میکنند و از آنها بعنوان سایت های web 2.0 ای یاد میشود؛ و در جامعه جهانی w3 یا World Wide Web صحبت از نسلهای سوم و چهارم وب سایت های اینترنتی است، اما هنوز وب سایت هایی که در بازار طراحی وب سایت های اینترنتی در ایران ، طراحی و ساخته میگردند، اندر خم کوچه web1.0 یا طراحی نسل اول وب سایت های اینترنتی میباشد . همان نسلی که تنها کار انتقال توده عظیمی از اطلاعات یا دیتاها را برای کاربران اینترنتی انجام میداد واین محتوای وب سایت بود که کاربر را هدایت مینمود.

اما با طراحی نسل دوم سایت های اینترنتی بر مبنای شبکه های اجتماعی (مانند سایت های Facebook, twitter, delicious وغیره …) نوع تعامل اینترنت با کاربر بطور اساسی وچشمگیری متفاوت گشت و شاید بجرات بتوان گفت که این مخاطب یا کاربر اینترنتی وب سایت ها بودند که وب سایت های اینترنتی را هدایت ویا کنترل میکردند . (نمونه بارز آن وب سایت اینترنتی youtube میباشد که کاربران فیلمها را در آن قرار داده ، به فیلمهای یکدیگر امتیاز یا تاییده میدهند و در نهایت آنها هستند که اجازه ادامه نمایش فیلمها را در وب سایت میدهند یا نمیدهند). این یعنی اوج احترام ویا تعامل با کاربر وب سایت های اینترنتی .

هرچند که خالق تکنولوژی W3 ، Tim Berners، معتقد است که طراحی هم نسل اول وب سایت ها و هم نسل دوم آنها باعث پیوند مردم به یکدیگر میشود و هدف نهایی از طراحی هر دو نسل همین بوده است وبا کمی تفاوت، طراحی نسل دوم وب سایت ها یک قسمت از تکنولوژی میباشد که بصورت "استانداردتر" و "بروز تر" به مخاطب عرضه میگردد و بصورت یک عملیات پیشرفته تر ، نسبت به نسل گذشته وب سایت ها و طراحی وب سایت ها ، درآمده است؛ اما درکل تفاوت چشمگیری است میان طراحی نسل اول با طراحی نسل دوم وب سایت های اینترنتی ، خصوصا در طراحی قالب وب سایت و نحوه تعامل با کاربر.
اما در ایران چطور؟

وب سایت های دولتی ما که بعضا هنوز در قالب یک HTML ساده بدون طرح ورنگ بندی و Lay out در طراحی وب سایت آنها، سالیان سال است که بروز نشده و مطالب کهنه و مندرس آنها به درد حتی خود طراحان آن نیز نمی خورد چه برسد به …

درک نکردن این موضوع که جامعه طراحی سایت های اینترنتی وارد موجهای دوم وسوم خود گشته وحتی سخن از موج چهارم سایت های اینترنتی است (بگونه ای مخاطب و اینترنت در تعامل ۱۰۰ درصد با یکدیگر میباشند و وب سایت های اینترنتی بصورت کاملا هوشمند درخواهندآمد)، چرا هنوز طراحی کاربردی ترین وب سایت های اینترنتی ما که همان مثلا وب سایت های بانکهای کشور میباشد (خصوصا وب سایت های بانکهای دولتی)، که مردم نیاز بسیاری به خدمات الکترونیکی آنها دارند، از ضعف بسیاری برخورداراست وکار طراحی این وب سایت ها به افراد کاردان سپرده نشده است.

بنظر می آید کار طراحی وب سایت نیز مانند مربیگری به افراد کاردان در آن حرفه سپرده نمی شود، به دوست و فامیل یا آشنا داده میشود تا بدون صرف تخصص کامل و یا نگرش جامع به نیاز مخاطب و همگام با تکنولوژی جدید در طراحی سایت ها، سپرده میشود……!!!

 

اول به نظرم اومد کار دشواری باشه، اما اینقدر ساده و راحت با یک فیلتر در فتوشاپ این کار انجام شد که دلم نیومد به شما هم نگم که شاید گره کاری گشاده شود با همین پست کوتاه؛

یک. خب، اولین قدم اینکه عکس پانورامای معمولی خودمون رو که در فتوشاپ باز کردیم باید ۱۸۰ درجه بچرخونیمش یا به عبارتی برعکسش کنیم؛ که به این طریق عمل می‌کنیم:
Image > Image Rotation > 180

دو. خیلی شاد و خندان از فیلتر پولار کوردینیتز استفاده می‌کنیم؛ در این مسیر:
Filter > Distort > Polar Coordinates

سه. خب، حالا فقط باید عکسمون رو ترنسفورم کنیم تا اینکه کره وسط تصویر دایره بشه؛ برای این کار همه تصویر را انتخاب می‌کنیم و از فری ترنسفورم استفاده می‌کنیم. همچنین از ابزار کراپ برای اینکه ابعاد عکسمون را اندازه کنیم.
Select > All
Edit > Free Transform
Crop Tool

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

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

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

 

گام ۱ : تکثیر لایه پس زمینه سه بار

ابتدا تصویر مورد نظرتان را در برنامه فتوشاپ بازکنید , حالا اگر به پالت layer در سمت راست نگاه کنید فقط یک لایه مشاهده می کنید , لایه پس زمینه که آن هم تصویر ما می باشد.

 

خوب حالا ما احتیاج به سه لایه دیگر از همین لایه پس زمینه داریم پس بنابر این با فشردن کلید های ترکیبی Ctrl+j سه لایه دیگر ایجاد می کنیم , در حال حاضرطبق تصویر زیر ما باید چهار لایه از تصویر اصلی داشته باشیم.

 

گام ۲ : غیرفعال کردن دو لایه بالا

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

 

گام ۳ : انتخاب layer 1

با کلیک بر روی فضای خالی layer 1 آن را انتخواب کنید لازم به ذکر است لایه انتخوابی با رنگ آبی پر رنگ از دیگر لایه ها متمایز می شود.

گام ۴ : اجرای گزینه Cutout از منوی Filter و سپس زیر منوی Artistic

در این مرحله مقادیر گزینه Cutout را طبق تصویر زیر وارد کنید و سپس ok کنید.

گام ۵ : تغییر درخشش layer 1 توسط گزینه Luminosity

بر روی layer 1 از پالت لایه ها کلیک کنید تا در حالت انتخواب قرار گیرد سپس از منوی کشویی بالا سمت چپ پالت که در حالت پیش فرض بر روی Normal قرار دارد با کلیک بر روی فلش رو به پایین گزینه Luminosity را انتخواب کنید.

تصویر شما اکنون باید چیزی شبیه به این باشد :

گام ۶ : انتخواب layer 1 copy

و اعمال گزینه Dry Brush” از منوی فیلتر و سپس زیر منوی Artistic در منوی اصلی فتوشاپ طبق مقادیر زیر

گام ۷ : اعمال گزینه Screen از پالت layer

از منوی کشویی بالا سمت چپ پالت که در حالت پیش فرض بر روی Normal قرار دارد با کلیک بر روی فلش رو به پایین گزینه Screen را انتخواب کنید.

دقت کنید که هنوز layer 1 copy در حالت انتخواب باشد.

تصویر شما اکنون باید چیزی شبیه به این باشد :

گام ۸ : انتخواب و فعال کردن لایه بالایی

فکر کنم دیگه لازم نباشه که بگم برای قابل رویت شدن لایه روی آیکون چشم کلیک کنید و سپس با کلیک بر ناحیه خالی لایه آن را انتخواب کنید تا به شکل آبی رنگ در بیاد , پس از این کار گزینه Median” از منوی Filter و زیر منوی Noise را انتخواب کنید و شعاع آن را ۱۲ قرار دهید و سپس ok کنید .

گام ۹ : اعمال گزینه Soft Light از پالت layer

در پایان برای تکمیل اثر از منوی کشوی سمت چپ پالت که در حالت پیش فرض بر روی Normal قرار دارد با کلیک بر روی فلش رو به پایین گزینه Soft Light را انتخواب کنید ,دقت کنید که layer 1 copy در حالت انتخواب باشد.

اینم تصویر اولیه و تصویر نهایی برای مقایسه :