タグ

designに関するhachiのブックマーク (5)

  • 画面デザインpart1: 画面UIの解剖 -- 構成要素と操作(翻訳)|TechRacho by BPS株式会社

    こんにちは、hachi8833です。シリーズ(全3回)は主にデザイナーを想定していますが、フロントエンド開発者、フルスタック開発者、HTMLコーダーにも有用な内容です。 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The Anatomy of all Interfaces -- Part I. A quick overview of how all digital things you interact with are constructed. 著者: Oscar Gonzalez 記事は、「デザインシステム」および画面UIのデザインや開発におけるデザインシステムの重要性について解説するシリーズ記事のpart 1です。 解剖学(anatomy)は、生き物を部分に切り分けて構造を記述する学問です。画面UIも生き物と同じように、誕生(プロジェクト発足)、成長(UIデザイナ

    画面デザインpart1: 画面UIの解剖 -- 構成要素と操作(翻訳)|TechRacho by BPS株式会社
  • Photoshopで写真レタッチ!昼の風景を夜のクリスマスに変えてみよう

    こんにちは。デザインチームのスギムラです。 前々回の記事でHiGH&LOWの話題に触れましたが新作も見てきました。FINAL MISSONと銘打ってるだけあって、終盤で今までの各シリーズのタイトルが最高にかっこいいテーマ曲とともに(なぜか)流れるシーンで目頭が熱くなりました。 さて、今回は「アドベントカレンダー企画だしクリスマスらしい記事が書きたいなぁ~」とネタを探していたらニシさんに写真レタッチネタで記事書こうと無茶ぶりされました。許さないとおもいつつやってみようと思います。 お題:「下記の写真をクリスマス風にする」 グリンデルワルトの冬(スイス) 素材提供元:PAKUTASO/ぱくたそ 写真もニシさんが選んで渡してきました。逃げられない。 というわけで今回はPhotoshopを使って何の変哲もない風景写真をクリスマスっぽい写真にしてみるレタッチのチュートリアルをご紹介します。 初心者向

    Photoshopで写真レタッチ!昼の風景を夜のクリスマスに変えてみよう
  • 【制作実績】入退室管理システム「入退くん」LPデザインのポイント|TechRacho by BPS株式会社

    こんにちは。BPSデザインチームのスギムラです。 先日の記事でも話しましたがスパイダーマンの新作を見てきました。 お金のかかった学園モノって感じで見ごたえありました!最高です! 編内容には関係ないですが冒頭の社長のネコTシャツ姿が気になって仕方ないです。 映画の感想はこのくらいで、デザインチームのスギムラが制作した自社サービスLP、入退室管理システム「入退くん」デザインのポイントについてご紹介します! 題材紹介 サイト名: 入退室管理システム入退くん サイト概要: BPSが開発・リリースした学習塾・個別指導教室向けの入退室管理システムの紹介LP 記事は上記サイトと合わせてお読みください! LPの構成・ライティング・デザインはスギムラ、コーディングはBPSの開発チームがそれぞれ担当いたしました。 なお、入退くんのサービス内容については弊社代表の渡辺が記事を書いています。ぜひこちらもご覧く

    【制作実績】入退室管理システム「入退くん」LPデザインのポイント|TechRacho by BPS株式会社
  • Webデザイナーがこっそり教える4つのテクニック|TechRacho by BPS株式会社

    初めまして、入社2年目のニシです。 漫画が好きなアラサーです。すぐ棚がいっぱいになるので定期的に売っぱらっています。人生を変えた漫画はプラネテスです。アニメは見ていません。 今回は、Webデザイナーがよく使うデザインテクニックを4つご紹介します。 「ノンデザイナーでもいい感じにできるデザインテクニック」とも言います。 ぜひこれを読んで活用してください。 目次 英語表記を加える 罫線でアクセントをつける アイコンを加える 写真を使う 1. 英語表記を加える 定番ですね。見出しとかロゴとか困ったら添えちゃう。 ありふれたデザインにならないようにするのが難しいけど、やっぱり英文かっこいい。 と、頻繁に使われるテクニックです。 たとえば以下のような感じ。 文言を置いただけの見出し(左)に英文を添えると、土台が出来て安定感が出ますね(右)。色やフォントや配置にも手を加えるとさらによさそう。 綴りを

    Webデザイナーがこっそり教える4つのテクニック|TechRacho by BPS株式会社
  • Photoshop: スライス卒業で高速コーディング!効率的な画像切り出し方法2選|TechRacho by BPS株式会社

    2017.08.02 Photoshop: スライス卒業で高速コーディング!効率的な画像切り出し方法2選 初めましてこんにちわ、BPSデザインチームのスギムラです。 マーベルなら断然アイアンマン派。 スパイダーマンの新作が待ち遠しい今日この頃です。シビルウォーのラストでボコボコにされた記憶が新しいので早く活躍する社長が見たいです。 入社して一年以上たっていますが、このたび記事を書くためについにTechrachoアカウントをつくりました。 ことのはじまり 先日、社内でデザイナーとコーダーで打ち合わせをしていたところ、新卒コーダーへ手順説明をしていた先輩コーダーが一言。 「(PSDデータからは)スライスで画像を書き出せばいいよ」 BPSではコーダー側でスライス作業をしているのですが、スライスで書き出ししていたんですね(その時までどう書き出ししていたかは知りませんでした) 「スライス」機能、確か

    Photoshop: スライス卒業で高速コーディング!効率的な画像切り出し方法2選|TechRacho by BPS株式会社
  • 1