こんにちは！ 最近肩を回すとボキッと鈍い音が鳴るようになってしまったデザイナーのsatoです。 SubversionやらHTML、JavaScriptなどお堅い文字の目立つSRIA BLOGですが、今日はデザインに関することを書こうと思います。 デザインと言っても「デザインする」側のことではなく、「デザインを貰ってコーディングする」側から見たデザインデータのお話です。 題して、「思わず手を合わせたくなる美デザインデータのつくりかた　整理・整頓編」ッッッ ※あくまでも私個人が思うことであり、誰もが良いデータだと思うかどうかはわかりません。 ※主にWEBサイトの制作を例にしております。 ※参考画像にはPhotoshopを使用しております。 では早速、一番大事なことから行こうと思います。 レイヤーはフォルダで分ける これがまったくなっておらず、全ての素材が羅列されていたときが 最も最も最も最も最

If you click "Log in with Facebook" or "Log in with Google" and are not a Prezi user, you will be registered, and you agree to Prezi’s Terms & Conditions and Privacy Policy.

それは、 仕事はもちろん プライベートでも 「AUN」はWeb制作の場面で、バグや修正の指示をスムーズにするために作られました。 しかし、他のビジネスシーンやプライベートなコミュニケーションにもご利用いただけるはずです。

OSSのテキストエディター「Brackets」で使える、Web制作に便利なプラグインを紹介し、拡張機能マネージャーの使い方や便利なプラグインを探すコツ、プラグインのインストール方法について解説する。 OSSのテキストエディターの豊富なプラグインをいろいろと使ってみよう OSSのテキストエディター「Brackets」は、拡張が容易に行えて好みの環境にカスタマイズしやすいのが特徴の一つだ。 筆者は、以前の記事でもBracketsの使い方について紹介したが、今回はBracketsのお勧めプラグイン（拡張機能）を紹介していこう。 その前に、Bracketsでプラグインをインストールする「拡張機能マネージャー」を紹介しておく。 Bracketsの「拡張機能マネージャー」とは Bracketsでは「拡張機能マネージャー」を利用してプラグインのインストールやアンインストールができる。「拡張機能マネージャ

レッスン一覧 料金プラン ログイン 2024/06/24 NEW 『Laravel入門 基本機能編』をリリースしました 2024/06/20 NEW 【週刊ドットインストール】 レッスン制作の進捗、HTMLの検証ツール、写真アップロード時の注意点 2024/06/18 NEW 【無料レッスン】 『Emmetで爆速コーディングを修得しよう』をリリースしました 2024/05/07 NEW あなただけの学習ロードマップを作成します 【随時受付中】

Markdown記法とは Markdown記法とは、軽量マークアップ言語のひとつです。 HTMLでマークアップを手打ちしたことがある方ならわかると思うのですが、テキストエディタでタグを打ち込むのは、結構大変ですし、慣れないうちは覚えきれない部分もあります。 ただ、Markdown記法を利用すると、覚えやすいちょっとした書き方を守ってプレーンテキストを書くだけで、HTMLを生成できるようになります。 ですので慣れてしまえば、HTMLを手入力したり、ツールなどでタグ付けなどをするよりは、早く基本的なHTML文書なら作成することができます。 Markdown記法を、ちょっとブラウザから試してみる場合は、以下のツールなどが便利です。

Webノート、というか、Javascriptで作られたwikiのTiddlyWiki5を日本語化してMarkdown入力ができるようにする。 ここでデモが見れる。 Qiita、Gistのような言語特有のコードハイライトはできないっぽい。 TiddlyWiki5のダウンロード http://tiddlywiki.com/ のGetting Startedで、Download EmplyまたはDownload full wikiをクリックしてhtmlを適当な場所に保存する。ファイル名は適当に変えてOK。 FirefoxユーザーはTiddlyFoxプラグインをインストールしておく。 保存したhmtlを開く。Firefoxユーザーは上記のプラグインがインストールされていれば、Tiddlyfox: Do you want to enable TiddlyWiki file saving capabi

ウェブレッジはソフトウェアに関する第三者検証サービスを提供しております。ソフトウェアテスト支援、UX改善、テスト自動化、セキュリティ（脆弱性）テストなど上流工程から下流工程まで様々な品質向上支援のメニューを揃えております。

コードを書かずに、本物のようなアプリを再現できる 簡単３ステップで、動くプロトタイプをすぐに作成できます。Web・iOS・Androidはもちろん、カスタムサイズでもお作りいただけます。 プロトタイプ作成機能 ワイヤーフレーム機能

こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ

PCのブラウザ上から無料で使える、画像のリサイズや画質変更を一括で行えるサービスが「Bulk Resize Photos」です。Bulk Resize Photosはウェブサービスですがファイルをアップロードする必要はなく、画像加工は全てブラウザ上で行われるので、無駄に通信量がかさむといったこともありません。 Bulk Resize Photos http://bulkresizephotos.com/ 「Bulk Resize Photos」の使い方は非常に単純で、加工したい画像をドラッグ＆ドロップで赤枠部分に移動させます。 加工画面はこんな感じ。「Scale」からは画像を拡大縮小可能で、赤枠部分に元画像の何％のサイズに拡大縮小するのかを入力すればOK。 「Longest Side」をクリックすれば画像の長辺を指定可能。画像の縦横比は元画像のものを保ったままリサイズされます。 「Widt

夜中に家に帰ったら食卓の上に宅配ピザが置いてあって、気がついたら丸々 1 枚食べきっていた sakai です。ブヒ。 今回はちょっと便利な小ネタをご紹介します。 WEB サイトのキャプチャやデザインカンプなど、縦に長ーい画像を印刷する場合は分割して印刷することになるかと思います。 ただ、ブラウザやアプリによっては分割印刷に対応していなかったりして、意外と面倒だったりします。 分割印刷する場合は画像をエクセルに貼り付けて印刷すると簡単に上手いこといきます。 例えば、以下のような長い画像。 これをエクセルに貼り付けます。（画像はエクセル 2003 です。他のバージョンでも手順はだいたい同様だと思います） 「挿入」→「図」→「ファイルから」を選択し、画像を指定して貼り付け。 続いて、「ページ設定」できちんと分割されるように改ページを調整します。 今回は縦長の画像なので「ページ設定」で「横：1 ペ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

はじめに 画像を切り抜きたいときは、いちいちパスでくり抜くより、抽出機能があればラクチンですよね！ 時間がないときも、抽出フィルタさえあればラックラク♪　【フィルタ】メニューから【抽出】を選んで…、と、、、あれ！CS4まではあったはずの【抽出】がCS5にはなくなっている！ 俺の【抽出】たん、どこいってもうたんや…、、とはなりませんが、CS5にはもっと簡単な抽出のやり方があります。 時間がないとき、そんなに細かく切り抜かなくてもいいとき、でもそれなりにきれいな切り抜きがあったらいいなと言うときに、ぜひ試してみてください！ 用意するもの 切り抜きたい画像 わかりやすく、切り抜きたい画像の下に灰色か何かのベタ地 Photoshop CS5 ↓下にわかりやすく、灰色を引いた状態 やり方 STEP1 まず、ツールパレット（横の細長いメニュー）から、なげなわツールを選択します。 STEP2 なげなわツ