デザイン

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめ ...

もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることがで ...

５分でできるレタッチ？！ Photoshopで誰でも簡単にできる人物写真のレタッチ方法をご紹介します。 参考として「美容系サイトのメインビジュアルで使用する人物写真」のレタッチを行っていきますが、採用サイトやLP制作など様々な場面で使えると思います。 レタッチ作業は時間がかかるとい ...

BRISKではお客様のご要望でWeb制作と一緒に名刺制作のご依頼を受けることがあります。 名刺制作の案件を担当する機会があったのと、前職での紙媒体の制作経験を活かして、今回は私なりの”ひと手間加えた名刺の作り方”についてご紹介します。 名刺をつくるまでの流れ 名刺制作のご依頼いただくと ...

ご無沙汰しています。作り方編まで大分間が空いてしまいました！ その1ではGIFの作り方についての概要を説明させてもらいましたが、今回はそれを踏まえたうえで実際の手順を詳しく説明していこうと思います。 Contents フレームアニメーションでのGIF作成 ビデオタイムラインでのG ...

SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、CCであればjpgやpngと同じようにアセット機能で書き出しができます。 上手くいかないあるある Photoshopから書き出しする時には、パス情報がきちんととれる状態か、というところが大事です。 ...

動きのついた広告やWebサイトは目を引きますよね。 GIFアニメはHTMLをサポートしている媒体なら再生ができる手軽なデータなのでWEB広告やサイトの要素でも使われているのを見かけます。言葉や静止画では伝わりづらいことも動画ならすぐに伝わるので説明にも便利なので、選択肢として作成スキルがあ ...

最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 ...

いきなりタイトルを裏切りますが、まずはaiファイルをPhotoshopで開くというのを試しましょう。 "ファイル" → "書き出し" → "書き出し形式" でpsdを選択して書き出しします。 書き出しオプションはWeb用（カラーモード：RGB / 解像度：スクリーン）に設定。 レイヤー ...

みなさんいよいよ2016年も年の瀬、いかがお過ごしでしょうか？ 少し前にクリスマス関連のページ制作とバナー制作をしましたが、意外と参考が見つからなかったので今回探してみました。 クリスマスのWebサイトを作成する際にきっと役に立つおまけ付きでご紹介します。 Marunouchi Bri ...

最近Photoshopの「CSSをコピー」が結構使えるなということに気づき、他にも知らなかった便利な機能があるかもと調べていたところ、Adobeのびっくりサービスを発見。 「CSSの生成」と「スライス」について、コーディングがスピードアップしそうなデザインツールの機能をまとめました。 ※ ...

過去の記事→ 未経験からwebデザイン会社に入社してみて 未経験からwebデザイナーとして入社してみて～3ヶ月目～ 早くも4ヶ月目です。新たに知ったことや学んだことを書いていきます。 Photoshopに関して レイヤースタイルでオブジェクトにドロップシャドウを付け、角度を ...

前回「未経験からwebデザイン会社に入社してみて」という記事を書かせていただきましたが、 まさかの第二弾です！（月1更新することになりました） 今月作業した中で知ったことなど書いていきたいと思います。 コーディング 今月初めてコーディングをしました。 コーディングについては、HTM ...

Androidアプリをデザインしよう！と思い立っても、ウェブデザイナーさんがいつものように作ろうとすると上手くいきません。 Androidアプリのための特有の知識が必要だからです。 が、ちょっと調べてみると知らないことが大量に出てきて焦りますよね。 そこで、Androidアプリデザインを始める ...