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

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

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

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

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

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

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

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

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

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

طراحی تخت

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

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

Khane-Soroud Khane-Soroud-2

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

Short Film 1 Short Film 2

در حالیکه نسل دوم وب سایت ها ، مدت هاست در بازار طراحی وب سایت ها خود نمایی زیادی میکنند و از آنها بعنوان سایت های 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 در حالت انتخواب باشد.

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